Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72416

Toggle Markers in Google Maps - Heatmap to zoom

$
0
0

Can anyone shed some light on the below - I am trying to toggle the markers. I have tried a number of different avenues to no avail. My map is a json heat map up to a certain zoom and then markers are shown. The markers differ and I want the user to have the option to toggle them.

<div id="map" style="height:650px;"></div>
<input type="checkbox" id="Burglary" onclick="toggleGroup('Burglary and related offences')" CHECKED />Burglary and related offences</input>
<input type="checkbox" id="Theft" onclick="toggleGroup('Theft and related offences')" CHECKED />Theft and related offences</input>

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=&libraries=visualization">
</script>

The script is shown below it is very code heavy but it seems to work up to a point.

var map;
var heatmap;
var markerGroups = {
    "Sexual offences": [],
    "Attempts/threats to murder, assaults, harassments and related offences": [],
    "Kidnapping and related offences": [],
    "Burglary and related offences": [],
    "Theft and related offences": [],
    "Fraud, deception and related offences": [],
    "Controlled drug offences": [],
    "Weapons and Explosives Offences": [],
    "Damage to property and to the environment": [],
    "Public order and other social code offences": [],
    "Offences against government, justice procedures and organisation of crime": [],
};

function initMap() {

    var infowindow = new google.maps.InfoWindow();
    var mapDiv = document.getElementById('map');
    map = new google.maps.Map(mapDiv, {
        center: {
            lat: 53.3070643,
            lng: -7.83237079
        },
        zoom: 7,
        mapTypeId: 'satellite'
);
    google.maps.event.addListener(map, 'zoom_changed', function() {
        var zoom = map.getZoom();
        if (zoom > 11) {
            // hide the heatmap, show the markers
            heatmap.setMap(null);
            map.data.setMap(map);
        } else {
            // hide the markers, show the heatmap
            heatmap.setMap(map);
            map.data.setMap(null);
        }
    })

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    map.data.addGeoJson(geoJsonShooting);

    var data;

    var JSONLoaded;

    var latLngList = [];
    var heatMapData = [];

    function letsGo(mapData) {

        for (i = 0; i < mapData.features.length; i++) {
            tempLocation = mapData.features[i]
            latLngList.push(tempLocation.geometry.coordinates);

            type = tempLocation.properties.description

            markerGroups[type].push(tempLocation);
        }

        for (i = 0; i < latLngList.length; i++) {
            var tempLat = latLngList[i][1];
            //console.log(
            var tempLong = latLngList[i][0];
            var tempVar = new google.maps.LatLng(tempLat, tempLong);
            heatMapData.push(new google.maps.LatLng(tempLat, tempLong));

        }

        var pointArray = new google.maps.MVCArray(heatMapData);



        heatmap = new google.maps.visualization.HeatmapLayer({
            data: pointArray
        });

        heatmap.setMap(map);
        map.data.setMap(null);


    }
    map.data.setStyle(function(feature) {
        var description = feature.getProperty('description');
        var icons = customIcons[description] || {};
        return {
            icon: icons.icon
        }
    });



    map.data.addListener('click', function(event) {
        infowindow.setContent(event.feature.getProperty('description') + "<br>" + event.feature.getProperty('crimedate'));
        infowindow.setPosition(event.latLng);
        infowindow.setOptions({
            pixelOffset: new google.maps.Size(0, -34)
        });
        infowindow.open(map);
    });
   letsGo(geoJsonShooting);
}

var iconBase =
    'https://developers.google.com/maps/documentation/javascript/examples/full/images/';

var customIcons = {
    "Sexual offences": {
        icon: iconBase + 'library_maps.png’
    },
    "Attempts/threats to murder, assaults, harassments and related offences": {
        icon: iconBase + 'library_maps.png'
    },
    "Kidnapping and related offences": {
        icon: iconBase + 'info-i_maps.png'
    },
    "Burglary and related offences": {
        icon: iconBase + 'library_maps.png'
    },
    "Theft and related offences": {
        icon: iconBase + 'info-i_maps.png'
    },
    "Fraud, deception and related offences": {
        icon: iconBase + 'library_maps.png'
    },
    "Controlled drug offences": {
        icon: iconBase + 'info-i_maps.png'
    },
    "Weapons and Explosives Offences": {
        icon: iconBase + 'library_maps.png'
    },
    "Damage to property and to the environment": {
        icon: iconBase + 'library_maps.png'
    },
    "Public order and other social code offences": {
        icon: iconBase + 'info-i_maps.png'
    },
    "Offences against government, justice procedures and organisation of crime": {
        icon: iconBase + 'library_maps.png'
    },
};

google.maps.event.addDomListener(window, 'load', initMap);

function toggleGroup(type) {
    for () {
      //######### 
    }
}

var geoJsonShooting = {
    "type": "FeatureCollection",
    "features": [

        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-7.7921, 53.2424]
            },
            "properties": {
                "crimedate": "{{ userlog.date }}",
                "post": "",
                "location_1_address": null,
                "location": "",
                "description": "Burglary and related offences",
                "neighborhood": "",
                "total_incidents": "",
                "location_1_city": null,
                "location_1_state": null,
                "crimecode": "",
                "weapon": "",
                "location_1_zip": null,
                "district": "",
                "crimetime": ""
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-7.6421, 53.3424]
            },
            "properties": {
                "crimedate": "{{ userlog.date }}",
                "post": "",
                "location_1_address": null,
                "location": "",
                "description": "Theft and related offences",
                "neighborhood": "",
                "total_incidents": "",
                "location_1_city": null,
                "location_1_state": null,
                "crimecode": "",
                "weapon": "",
                "location_1_zip": null,
                "district": "",
                "crimetime": ""
            }
        },
        {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [-7.6921, 53.1424]
            },
            "properties": {
                "crimedate": "{{ userlog.date }}",
                "post": "",
                "location_1_address": null,
                "location": "",
                "description": "Theft and related offences",
                "neighborhood": "",
                "total_incidents": "",
                "location_1_city": null,
                "location_1_state": null,
                "crimecode": "",
                "weapon": "",
                "location_1_zip": null,
                "district": "",
                "crimetime": ""
            }
        },

    ],
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    }
};

I have tried to toggle by description but no luck


Viewing all articles
Browse latest Browse all 72416

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>