<input id="distVal" name="distVal" type="range" value=".25" min=".25" max="2" step=".1" onchange="updateRadiusPreview();"></input>
<label id="lblDistVal"></label>
<button id="btnApplyRadius">Apply Radius</button>
<div id="mapDiv" class="mapsize"></div>
.mapsize{
position:absolute;
height:600px;
width:600px;
top:80px;
left:0px
}
var mapCfg = '<mapView createdBy="name:cMapsAnalyticsDesigner;version:4.0" createdOn="2/10/2017"><viewName>My View</viewName><viewDescription></viewDescription><tags></tags><templateVersion></templateVersion><key>enter_your_own_key_d8d37yxn</key><googlePremierKey></googlePremierKey><sslEnabled>true</sslEnabled><baseMapTileUrl></baseMapTileUrl><baseMapTileCfg></baseMapTileCfg><useGoogleBase>true</useGoogleBase><useMapboxBase>false</useMapboxBase><useHereBase>false</useHereBase><useCartoBase>false</useCartoBase><useEsriBase>false</useEsriBase><dynamicZoomEnabled>false</dynamicZoomEnabled><currentLocationOnLoadDisabled>true</currentLocationOnLoadDisabled><panCoords>37.760998,-122.451254</panCoords><zoomLevel>13</zoomLevel><dynamicZoomOnShapeSelect>false</dynamicZoomOnShapeSelect><dynamicZoomOnClusterSelect>true</dynamicZoomOnClusterSelect><dynamicZoomOnPointSelect>false</dynamicZoomOnPointSelect><showBreadcrumbsOnDrill>true</showBreadcrumbsOnDrill><dynamicZoomOnDrill>true</dynamicZoomOnDrill><multiSelectEnabled>false</multiSelectEnabled><adhocPanelVisibility>false</adhocPanelVisibility><radiusMeasureUnit>km</radiusMeasureUnit><indoorEnabled>true</indoorEnabled><useAdvancedInfowindow>false</useAdvancedInfowindow><showSearchBarWhenAIWHidden>true</showSearchBarWhenAIWHidden><showAIWOnLoad>true</showAIWOnLoad><showAIWOnLocSelect>true</showAIWOnLocSelect><includeAdvancedInfWinSummaryCard>true</includeAdvancedInfWinSummaryCard><includeAdvancedInfWinFilterCard>true</includeAdvancedInfWinFilterCard><includeAdvancedInfWinRankCard>true</includeAdvancedInfWinRankCard><includeAdvancedInfWinTimeCard>true</includeAdvancedInfWinTimeCard><includeAdvancedInfWinSearchCard>true</includeAdvancedInfWinSearchCard><includeAdvancedInfWinSearchPlacesCard>true</includeAdvancedInfWinSearchPlacesCard><includeAdvancedInfWinExportCard>true</includeAdvancedInfWinExportCard><includeAdvancedInfWinDriveCard>true</includeAdvancedInfWinDriveCard><includeAdvancedInfWinDrivePolysCard>true</includeAdvancedInfWinDrivePolysCard><includeAdvancedInfWinDrillCard>true</includeAdvancedInfWinDrillCard><includeAdvancedInfWinCustomCard>true</includeAdvancedInfWinCustomCard><advancedInfoWindowJsonCfg></advancedInfoWindowJsonCfg><infoWindowFontFamily>Arial</infoWindowFontFamily><infoWindowFontSize>12</infoWindowFontSize><infoWindowFontColor>000000</infoWindowFontColor><infoWindowFontAlign>left</infoWindowFontAlign><infoWindowUseBoldFont>false</infoWindowUseBoldFont><infoWindowFontUnderlineEnabled>false</infoWindowFontUnderlineEnabled><infWinItalicFontEnabled>false</infWinItalicFontEnabled><infoWindowVisibility>true</infoWindowVisibility><infoWindowValueVisibility>true</infoWindowValueVisibility><infoWindowLayerNameVisibility>false</infoWindowLayerNameVisibility><glowVisibility>true</glowVisibility><glowColor>0000ff</glowColor><baseMapImageryStyleType>styleTypeRoadmap</baseMapImageryStyleType><enablePoiInteractivity>true</enablePoiInteractivity><showTrafficLayer>false</showTrafficLayer><showTransitLayer>false</showTransitLayer><showBikelayer>false</showBikelayer><legendVisibility>false</legendVisibility><clusterToggleControlVisibility>false</clusterToggleControlVisibility><navigationControlVisibility>true</navigationControlVisibility><currentLocationControlVisibility>false</currentLocationControlVisibility><mapReady>true</mapReady><layerSelected>false</layerSelected><zoomChanged>false</zoomChanged><centerChanged>false</centerChanged><reverseGeocodeResponse>false</reverseGeocodeResponse><latLngToReverseGeocode></latLngToReverseGeocode><geocodeResponse>false</geocodeResponse><addressToGeocode></addressToGeocode><visible>true</visible><indoorMapVisibility>false</indoorMapVisibility><showPinsForIndoorMapLocations>false</showPinsForIndoorMapLocations><directionPanelVisibility>false</directionPanelVisibility><directionWaypoints></directionWaypoints><currentLocation>false</currentLocation><useFreeApi>false</useFreeApi><layers><layer><name>MyLayer</name><description></description><esriMapServerURL></esriMapServerURL><esriMapServerLayerName></esriMapServerLayerName><letGisHandleClicks>false</letGisHandleClicks><type>clusterdrill</type><sankeyJsonData></sankeyJsonData><cartoDBJsonVizURL></cartoDBJsonVizURL><cartoDBSubLayerId>null</cartoDBSubLayerId><cartoDBUser></cartoDBUser><cartoDBSqlQuery></cartoDBSqlQuery><cartoDBMeasFieldName>null</cartoDBMeasFieldName><cartoDBDrillColName>null</cartoDBDrillColName><cartoDBTorqueJsonVizURL></cartoDBTorqueJsonVizURL><cartoDBUsername></cartoDBUsername><cartoDBMapName></cartoDBMapName><cartoDBAuthKey></cartoDBAuthKey><cartoDBMapLayerName></cartoDBMapLayerName><cartoDBMapLayerInteractivity></cartoDBMapLayerInteractivity><cartoDBMapLayerTorqueCSS></cartoDBMapLayerTorqueCSS><useLayerSpecificApiInfWins>true</useLayerSpecificApiInfWins><useLayerSpecificApiTooltips>true</useLayerSpecificApiTooltips><cartoDBMapLayerUseHttps>true</cartoDBMapLayerUseHttps><indoorMapUrl></indoorMapUrl><bufferDependentLayer>none</bufferDependentLayer><bufferDistUnit>meters</bufferDistUnit><bufferPlacement>back</bufferPlacement><shapeFileType>customUrl</shapeFileType><shapeFileUrl></shapeFileUrl><shapeGeocoderLevel>uszips</shapeGeocoderLevel><dataKeysUrl></dataKeysUrl><dataSourceType>statictsv</dataSourceType><dataSource><![CDATA[37.7630855,-122.4578733 Dr. Dongle 17\r\n \
37.7739893,-122.4544912 Dr. Douglus 18]]></dataSource><dataSourceFirstRowTitles>false</dataSourceFirstRowTitles><dataSourceColumnDefs>[{"dataField":"dsLocationColumn","fieldDisplayName":"","colPosition":0},{"dataField":"dsLabelColumn","fieldDisplayName":"","colPosition":1},{"dataField":"dsValueColumn","fieldDisplayName":"","colPosition":2},{"dataField":"dsColorColumn","fieldDisplayName":"","colPosition":3},{"dataField":"dsCategoryColumn","fieldDisplayName":"","colPosition":4},{"dataField":"dsDrillIdColumn","fieldDisplayName":"","colPosition":5}]</dataSourceColumnDefs><transparency>100</transparency><enabled>true</enabled><iconSize>20</iconSize><iconType>icon</iconType><clusterStyle>sum</clusterStyle><clusterRadiusUnitOfMeasure>km</clusterRadiusUnitOfMeasure><clusterRadiusDistance>.25</clusterRadiusDistance><dynamicSizeEnabled>false</dynamicSizeEnabled><useLogScale>false</useLogScale><visibility>true</visibility><minZoomVis></minZoomVis><maxZoomVis></maxZoomVis><drillLevel></drillLevel><drillEventTrigger>layerClicked</drillEventTrigger><drillParent>none</drillParent><drillVisibilityOverride>false</drillVisibilityOverride><useCurrentLocationAsStartPoint>false</useCurrentLocationAsStartPoint><travelMode>Driving</travelMode><travelUnits>IMPERIAL</travelUnits><markerLayerBindings></markerLayerBindings><useCacheDriveTimePolyService>on</useCacheDriveTimePolyService><wmsURL></wmsURL><wmsStyleString></wmsStyleString><wmsLayerString></wmsLayerString><layerColor>1b8dce</layerColor><alerts><alertIcons>pin,pin</alertIcons><alertType>type-none</alertType><alertValues>50,100</alertValues><numAlertLevels>2</numAlertLevels><alertHeatmapVals>50,100</alertHeatmapVals><alertDefinition>high-values-good</alertDefinition><alertColors>c0c0c0,008800</alertColors></alerts></layer><layer><name>My Layer</name><description></description><esriMapServerURL></esriMapServerURL><esriMapServerLayerName></esriMapServerLayerName><letGisHandleClicks>false</letGisHandleClicks><type>radius</type><sankeyJsonData></sankeyJsonData><cartoDBJsonVizURL></cartoDBJsonVizURL><cartoDBSubLayerId>null</cartoDBSubLayerId><cartoDBUser></cartoDBUser><cartoDBSqlQuery></cartoDBSqlQuery><cartoDBMeasFieldName>null</cartoDBMeasFieldName><cartoDBDrillColName>null</cartoDBDrillColName><cartoDBTorqueJsonVizURL></cartoDBTorqueJsonVizURL><cartoDBUsername></cartoDBUsername><cartoDBMapName></cartoDBMapName><cartoDBAuthKey></cartoDBAuthKey><cartoDBMapLayerName></cartoDBMapLayerName><cartoDBMapLayerInteractivity></cartoDBMapLayerInteractivity><cartoDBMapLayerTorqueCSS></cartoDBMapLayerTorqueCSS><useLayerSpecificApiInfWins>true</useLayerSpecificApiInfWins><useLayerSpecificApiTooltips>true</useLayerSpecificApiTooltips><cartoDBMapLayerUseHttps>true</cartoDBMapLayerUseHttps><indoorMapUrl></indoorMapUrl><bufferDependentLayer>none</bufferDependentLayer><bufferDistUnit>meters</bufferDistUnit><bufferPlacement>back</bufferPlacement><shapeFileType>customUrl</shapeFileType><shapeFileUrl></shapeFileUrl><shapeGeocoderLevel></shapeGeocoderLevel><dataKeysUrl></dataKeysUrl><dataSourceType>noselected</dataSourceType><dataSource><![CDATA[]]></dataSource><dataSourceFirstRowTitles>false</dataSourceFirstRowTitles><dataSourceColumnDefs>[]</dataSourceColumnDefs><transparency>50</transparency><enabled>true</enabled><iconSize>20</iconSize><iconType>pin</iconType><clusterStyle>disabled</clusterStyle><clusterRadiusUnitOfMeasure>auto</clusterRadiusUnitOfMeasure><clusterRadiusDistance></clusterRadiusDistance><dynamicSizeEnabled>false</dynamicSizeEnabled><useLogScale>false</useLogScale><visibility>true</visibility><minZoomVis></minZoomVis><maxZoomVis></maxZoomVis><drillLevel></drillLevel><drillEventTrigger>none</drillEventTrigger><drillParent>none</drillParent><drillVisibilityOverride>false</drillVisibilityOverride><useCurrentLocationAsStartPoint>false</useCurrentLocationAsStartPoint><travelMode>Driving</travelMode><travelUnits>METRIC</travelUnits><markerLayerBindings></markerLayerBindings><useCacheDriveTimePolyService>on</useCacheDriveTimePolyService><wmsURL></wmsURL><wmsStyleString></wmsStyleString><wmsLayerString></wmsLayerString><layerColor>1b8dce</layerColor><alerts><alertIcons>pin,pin</alertIcons><alertType>type-none</alertType><alertValues>50,100</alertValues><numAlertLevels>2</numAlertLevels><alertHeatmapVals>50,100</alertHeatmapVals><alertDefinition>high-values-good</alertDefinition><alertColors>c0c0c0,008800</alertColors></alerts></layer></layers></mapView>';
var cMap;
function init(){
cMap = new centigon.locationIntelligence.MapView();
cMap.onLayersReady = function(){
setTimeout(setClusterDistance, 300);
}
cMap.parseConfigXml(mapCfg);
$("#btnApplyRadius").click(setClusterDistance);
}
function setClusterDistance(){
cMap.clusterOptions([{radius_unit_of_measure:"km", radius:$("#distVal").val()}]);
updateRadiusPreview();
}
function updateRadiusPreview(){
var radiusInMeters = cMap.convertDistanceToMeters($("#distVal").val(), "km");
var location1Layer1 = cMap.getLayerAt(0).locations()[0];
var radiusLayer = cMap.getLayerAt(1);
radiusLayer.values([[radiusInMeters]]);
radiusLayer.locations([location1Layer1]);
$("#lblDistVal").text("Value: " + $("#distVal").val());
}
//WHEN DOCUMENT LOADED INITIALIZE THE MAP
$(document).ready(function(){
// CALL THE FUNCTION
init();
});
This Pen doesn't use any external CSS resources.