I have the following code but when I click on a point to open a popup it returns 'undefined' and I cannot seem to work out why.
I'm pulling the description field from the geoJSON external source which I have control over but for some reason it just does not want to populate the description HTML in my array. I took the example for the popup from the mapbox website so I know it works there. I have checked, rechecked and triple checked but I think I cannot see the tree for the forest lol.
Could someone maybe help me please? thanks.
<script>
// ajax loading gif
$(document).ready(function () {
setTimeout(function () {
$("#ajax-loader").removeClass("is-active");
}, 6000);
});
// vars
var initialOpacity = 0.2;
var opacity = initialOpacity;
// mapbox api
mapboxgl.accessToken = "hidden_api_key";
var map = new mapboxgl.Map({
container: "map", // container ID
style: "mapbox://styles/mapbox/dark-v10",
center: [-2.582861, 53.5154517],
zoom: 5,
maxZoom: 16,
minZoom: 0,
});
map.on("load", function () {
// get hotspot locations
map.addSource("hotspot_locations", {
type: "geojson",
data: "https://netmaker.io/dashboard/public_actions.php?a=ajax_helium_miners_location",
cluster: false,
clusterMaxZoom: 10, // max zoom to cluster points on
clusterRadius: 50, // radius of each cluster when clustering points (defaults to 50)
});
// add 300m circle around each hotspot
map.addLayer({
id: "circle500",
type: "circle",
source: "hotspot_locations",
paint: {
"circle-radius": {
stops: [
[0, 1],
[16, 600],
],
base: 2,
},
"circle-color": "green",
"circle-opacity": 0.1,
"circle-stroke-width": 0,
"circle-stroke-color": "white",
},
});
// add hotspot location
map.addLayer({
id: "hotspots-layer",
type: "circle",
source: "hotspot_locations",
paint: {
"circle-radius": 2,
"circle-stroke-width": 2,
// "circle-color": "#36d293",
"circle-color": "white",
"circle-stroke-color": [
"match",
["get", "status"],
"online",
"#36d293",
"offline",
"#d23636",
"orange", // other
],
// "circle-stroke-color": '#36d293',
},
});
});
// ajax call hotspots location by name
var customData;
$.ajax({
async: false,
type: "GET",
global: false,
dataType: "json",
url: "https://netmaker.io/dashboard/public_actions.php?a=ajax_helium_miners_location_customdata",
success: function (data) {
customData = data;
},
});
// custom data using hotspot name
function forwardGeocoder(query) {
var matchingFeatures = [];
for (var i = 0; i < customData.features.length; i++) {
var feature = customData.features[i];
if (feature.properties.title.toLowerCase().search(query.toLowerCase()) !== -1) {
// feature["place_name"] = '<img src="https://netmaker.io/dashboard/images/helium_logo.svg" alt="" width="15px"> ' + feature.properties.title;
feature["place_name"] = feature.properties.title;
feature["center"] = feature.geometry.coordinates;
feature["place_type"] = ["hotspot"];
matchingFeatures.push(feature);
}
}
return matchingFeatures;
}
// add the control to the map.
map.addControl(
new MapboxGeocoder({
accessToken: mapboxgl.accessToken,
localGeocoder: forwardGeocoder,
zoom: 14,
placeholder: "Search: address or hotspot name",
mapboxgl: mapboxgl,
})
);
map.on("click", "hotspots-layer", function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.description;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map);
});
map.on("mouseenter", "hotspots-layer", function () {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "hotspots-layer", function () {
map.getCanvas().style.cursor = "";
});
</script>
You're recieving an undefined because e.features[0].properties.description doesn't exist in the "hotspots-layer" data.
"features": [
{
"type": "Feature",
"properties": {
"status": "online"
},
"geometry": {
"type": "Point",
"coordinates": [
"119.73479929772",
"30.240836896893",
0
]
}
},
The only "description" in this case that you can return is the e.features[0].properties.status as seen here:
map.on("click", "hotspots-layer", function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].properties.status;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
console.log(description)
new mapboxgl.Popup().setLngLat(coordinates).setHTML(description).addTo(map);
});
This code snippet will allow the click event to show you the status when you interact with the hotspot location.
I tried to render the polygon-shaped surfaces on the map whenever user clicks on polygon shape layer A popup
with polygon details is displayed and the layer can be edited.In the popup, there is option to delete the polygon. After Clicking on Delete on popup I tried reinitialize the map with new surfaces i.e(polygons) data but still, the selected surface is appearing.
componentDidUpdate(prevProps, prevState) {
const { user, surfaces } = this.props;
const { allLayers } = this.state;
const that = this;
let selectedSurface = null;
if (!prevProps.user.id && user.id) {
this.initializeMap();
}
if (this.props.deleteAction.success !== prevProps.deleteAction.success) {
this.props.actionFetch();
map.remove();
this.initializeMap();
}
if ((allLayers.length === 1 && surfaces.length) || (surfaces.length !==
prevProps.surfaces.length)) {
let allLayers = [{ key: -1, name: this.props.intl.formatMessage({ id:
'surface.allsurfaces' }), color: '#CCCCCC' }];
surfaces.forEach((o) => {
let l = L.geoJSON(o.geometry)._layers;
[l] = Object.keys(l).map(ob => l[ob]);
const customlayer = this.addPopupToLayer(o, l);
map.addLayer(drawnItems[o.surface_type.id].addLayer(customlayer));
l.on('click', (e) => {
if (selectedSurface) {
selectedSurface.editing.disable();
}
selectedSurface = e.target;
e.target.editing.enable();
that.setState({
popup: true,
detail: true,
surfaceDetail: o,
typeSelected: o.surface_type,
editSurface: selectedSurface
});
});
allLayers.push({
key: o.surface_type.id,
name: o.surface_type.name,
color: o.surface_type.color
});
});
allLayers = allLayers.filter(
(l, index, self) => self.findIndex(
t => t.key === l.key
) === index
);
this.setState({
allLayers,
counter: surfaces.length
});
}
}
initializeMap() {
const { user, actionFetch, actionFetchTypes } = this.props;
actionFetch();
actionFetchTypes();
map = L.map('map', {
center: [...user.airport.location.coordinates].reverse(),
zoom: 15,
editable: true,
});
L.gridLayer.googleMutant({ type: 'satellite', maxZoom: 20 }).addTo(map);
const that = this;
map.on(L.Draw.Event.CREATED, (e) => {
drawnItems[that.state.typeSelected.key].addLayer(e.layer);
utils.toggleZooming(map, 'disable');
that.setState({ popup: true, layer: e.layer });
});
map.on('draw:deleted', (e) => {
that.setState({ popup: false });
});
}
.In the popup, there is option to delete the polygon.
Please check below example.
// initialize the map
var map = L.map('map', {
center: [0.4, 102],
zoom: 7
});
// add map layer (OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team'
}).addTo(map);
// load example GEOJSON (from Wikipedia)
var geojsonFeature = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"prop0": "A"
}
},{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
]
},
"properties": {
"prop0": "B",
"prop1": 0.0
}
},{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
]
},
"properties": {
"prop0": "C",
"prop1": {"this": "that"}
}
}
]
};
// load GEOJSON object/array to map
L.geoJSON(geojsonFeature, {
// style features based on properties
style: function(feature) {
switch(feature.properties.prop0){
case 'B': return { color: "red" }
case 'C': return { color: "green" }
}
},
// replace default maker with circle for point feature
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius: 14,
fillColor: "orange",
color: "orange",
weight: 2,
opacity: 1,
fillOpacity: 0.5
});
},
// bind tooltip to each feature
onEachFeature: function(feature, layer) {
var popupContent = "<button onclick='removeSelectedLayer(\""+feature.properties.prop0+"\")'>Click here to remove this polygon</button><p>";
if (feature.properties.prop0) {
popupContent += feature.properties.prop0;
}
layer.bindPopup(popupContent);
layer.myTag = feature.properties.prop0
}
}).addTo(map);
function removeSelectedLayer(layerName) {
map.eachLayer( function(layer) {
console.log(layer.myTag)
if ( layer.myTag && layer.myTag === layerName) {
map.removeLayer(layer)
}
});
}
#map {
height: 500px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js"crossorigin=""></script>
<div id="map"></div>
Hope this will helps you
I am using Leaflet javascript library to show some earthquake information. You are able to see few red circles on map. When you click that red circle it will display few details in popup.
I want to show the popup when you click the link from outside of map. This (answer) is useful. But, I want to achieve it without ID? I mean if i have more than 30 markers on map and also I don't have any ID, just class names in my links. How do I trigger popup when I click a link from outside of map?
This (answer) is good. In this answer they mentioned marker 1, marker 2 and marker 3. But, In my case I don't know how many markers will show. Sometimes 5, 50, 100 or may be more than 150. Thats why I have asked this question.
<html>
<head>
<meta charset="utf-8" />
<title>Leaflet</title>
<link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""
/>
<script
src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""
></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
<script>
var object = {
type: "FeatureCollection",
metadata: {
generated: 1564051101000,
url:
"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-07-20&endtime=2019-07-21&minmagnitude=5",
title: "USGS Earthquakes",
status: 200,
api: "1.8.1",
count: 4
},
features: [
{
type: "Feature",
properties: {
mag: 5.2000000000000002,
place: "79km ENE of L'Esperance Rock, New Zealand",
time: 1563662132538,
updated: 1563663302040,
tz: -720,
url: "https://earthquake.usgs.gov/earthquakes/eventpage/us70004pu1",
detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pu1&format=geojson",
felt: null,
cdi: null,
mmi: null,
alert: null,
status: "reviewed",
tsunami: 0,
sig: 416,
net: "us",
code: "70004pu1",
ids: ",us70004pu1,",
sources: ",us,",
types: ",geoserve,origin,phase-data,",
nst: null,
dmin: 1.9299999999999999,
rms: 1.28,
gap: 70,
magType: "mww",
type: "earthquake",
title: "M 5.2 - 79km ENE of L'Esperance Rock, New Zealand"
},
geometry: { type: "Point", coordinates: [-178.1173, -31.174800000000001, 35] },
id: "us70004pu1"
},
{
type: "Feature",
properties: {
mag: 5.5999999999999996,
place: "23km NNW of Kandrian, Papua New Guinea",
time: 1563655424914,
updated: 1563741959328,
tz: 600,
url: "https://earthquake.usgs.gov/earthquakes/eventpage/us70004psn",
detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004psn&format=geojson",
felt: 1,
cdi: 4.2999999999999998,
mmi: 4.4779999999999998,
alert: "green",
status: "reviewed",
tsunami: 1,
sig: 483,
net: "us",
code: "70004psn",
ids: ",us70004psn,",
sources: ",us,",
types: ",dyfi,geoserve,losspager,moment-tensor,origin,phase-data,shakemap,",
nst: null,
dmin: 3.2029999999999998,
rms: 0.89000000000000001,
gap: 28,
magType: "mww",
type: "earthquake",
title: "M 5.6 - 23km NNW of Kandrian, Papua New Guinea"
},
geometry: { type: "Point", coordinates: [149.5069, -6.0086000000000004, 59.789999999999999] },
id: "us70004psn"
},
{
type: "Feature",
properties: {
mag: 5.0999999999999996,
place: "Easter Island region",
time: 1563647034336,
updated: 1563892918040,
tz: -420,
url: "https://earthquake.usgs.gov/earthquakes/eventpage/us70004pra",
detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pra&format=geojson",
felt: null,
cdi: null,
mmi: null,
alert: null,
status: "reviewed",
tsunami: 0,
sig: 400,
net: "us",
code: "70004pra",
ids: ",us70004pra,",
sources: ",us,",
types: ",geoserve,origin,phase-data,",
nst: null,
dmin: 2.7559999999999998,
rms: 0.71999999999999997,
gap: 118,
magType: "mb",
type: "earthquake",
title: "M 5.1 - Easter Island region"
},
geometry: { type: "Point", coordinates: [-111.38379999999999, -29.3232, 10] },
id: "us70004pra"
},
{
type: "Feature",
properties: {
mag: 5.0999999999999996,
place: "136km ESE of Pangai, Tonga",
time: 1563635789233,
updated: 1563636880040,
tz: -720,
url: "https://earthquake.usgs.gov/earthquakes/eventpage/us70004pp5",
detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pp5&format=geojson",
felt: null,
cdi: null,
mmi: null,
alert: null,
status: "reviewed",
tsunami: 0,
sig: 400,
net: "us",
code: "70004pp5",
ids: ",us70004pp5,",
sources: ",us,",
types: ",geoserve,origin,phase-data,",
nst: null,
dmin: 3.2749999999999999,
rms: 1.3100000000000001,
gap: 116,
magType: "mww",
type: "earthquake",
title: "M 5.1 - 136km ESE of Pangai, Tonga"
},
geometry: { type: "Point", coordinates: [-173.15700000000001, -20.294899999999998, 10] },
id: "us70004pp5"
}
],
bbox: [-178.1173, -31.1748, 10, 149.5069, -6.0086, 59.79]
};
var i = 0;
document.writeln("<div>");
for (i = 0; i < object.features.length; i++) {
var timestamp = object.features[i].properties.time / 1000;
date = new Date(timestamp * 1000);
dateString = date.toUTCString();
var today = date;
today.setHours(today.getHours() + 4);
// maps
document.writeln("<div class='list'>");
document.writeln("<div>" + object.features[i].properties.mag + " Mag</div>");
document.writeln("</div>");
}
document.writeln("</div>");
var map = L.map("map").setView([-31.174800000000001, -178.1173], 2);
// load a tile layer
L.tileLayer(
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
{
attribution:
"Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012",
maxZoom: 18
}
).addTo(map);
// load GeoJSON from an external file
$.getJSON(
"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-07-20&endtime=2019-07-21&minmagnitude=5",
function(data) {
var geojsonMarkerOptions = {
opacity: 0.8,
fillOpacity: 0.6
};
// color indication by magnitude
geoLayer = L.geoJson(data, {
// popup div content
onEachFeature: function(feature, layer) {
// variable1 = L.marker([-31.174800000000001,-178.1173]).bindPopup('The html content').addTo(map);
var popupText =
"<b>Magnitude:</b> " +
feature.properties.mag +
"<br><b>Location:</b> " +
feature.properties.place;
layer.bindPopup(popupText, {
closeButton: true,
offset: L.point(0, -20)
});
layer.on("click", function() {
layer.openPopup();
});
},
style: function(feature) {
var mag = feature.properties.mag;
if (mag >= 4.0) {
return { color: "red" };
} else if (mag >= 3.0) {
return { color: "orange" };
} else if (mag >= 2.0) {
return { color: "yellow" };
} else {
return { color: "black" };
}
},
// add GeoJSON layer to the map once the file is loaded
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
}).addTo(map);
}
);
</script>
</body>
</html>
Here is an example of a possible solution using es6:
create for instance a div which will hold the anchor tags to be added dynamically:
<div id="anchors"></div>
Now in the js file:
let markersArray = {}; // create the associative array
let magsArray = {}; // here hold the ids that correspond to the mags
// load GeoJSON from an external file
$.getJSON("https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-07-20&endtime=2019-07-21&minmagnitude=5", data => {
// color indication by magnitude
L.geoJson(data, {
// add GeoJSON layer to the map once the file is loaded
pointToLayer: function(feature, latlng) {
const mag = feature.properties.mag;
const geojsonMarkerOptions = {
opacity: 0.8,
fillOpacity: 0.6,
// here define the style using ternary operators for circles
color: mag >= 4.0 ? 'red' : mag >= 3.0 ? 'orange' : mag >= 2.0 ? 'yellow' : 'black'
};
// here store the circle markers in the array
markersArray[feature.id] = L.circleMarker(latlng, geojsonMarkerOptions)
.addTo(map)
.bindPopup(
`<b>Magnitude:</b> " ${feature.properties.mag}
<br><b>Location:</b> ${feature.properties.place}`, {
closeButton: true,
offset: L.point(0, -20)
});
// here record the mags
magsArray[feature.id] = feature.properties.mag;
return L.circleMarker(latlng, geojsonMarkerOptions);
},
})
// add dynamically anchor tags
let markup = '';
for (let i in markersArray) {
markup += `<b>${magsArray[i]} Mag</b><br/>`;
}
document.getElementById('anchors').innerHTML = markup;
});
Last but not least I do not see the reason of fetching the data using the API and both have it also as a constant variable in your file.
Demo
I tried to load multiple geojson file to my google maps and all of them are shown. But the way the google maps show them is really random.
Here is my concept:
I have a polygon which i intended making as a base layer that suppose to appear first.
I have other polygon and linestring which will dynamically change from database and suppose to show on top of the base layer.
Sometimes the base layer will appear on top and vice versa. And other times, some of the linestring appear at the bottom of the base layer while some others at the top. Is there any way to order how the geojson layer appear?
I found similar problem: KML Layers rendering order google maps
but, that is for kml not geojson.
var map;
var src = '<?php echo base_url() ?>assets/map_files/global/barudt.json';
function initMap() {
map = new google.maps.Map(document.getElementById('googlemapsBorders'), {
center: new google.maps.LatLng(-0.7, 115.2422315),
zoom: 9,
mapTypeId: 'roadmap'
});
var infoWindows = new google.maps.InfoWindow({
disableAutoPan: true
});
var infoJalan = new google.maps.InfoWindow();
map.data.loadGeoJson(src);
map.data.setStyle(function(feature) {
var color = feature.getProperty('color');
return /** #type {!google.maps.Data.StyleOptions} */ ({
fillColor: color,
strokeColor: color,
strokeWeight: 2
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {
strokeWeight: 5
});
var title = event.feature.getProperty('Name');
var lt = parseFloat(event.feature.getProperty('lat'));
var lg = parseFloat(event.feature.getProperty('lng'));
infoWindows.setContent(title);
infoWindows.setPosition({
lat: lt,
lng: lg
});
infoWindows.open(map);
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
infoWindows.close();
});
var jalan = JSON.parse(`<?php echo $detail; ?>`);
var jembatan = JSON.parse(`<?php echo $jembatan_detail; ?>`);
var infoWindow = new google.maps.InfoWindow(),
marker, i;
var infoWindowContent = JSON.parse(`<?php echo ($infowindow); ?>`);
console.log(jalan);
console.log(jembatan);
console.log(infoWindowContent);
jalanLayer = new google.maps.Data({
map: map,
style: {
strokeColor: 'red',
strokeWeight: 5
}
});
for (i = 0; i < jalan.length; i++) {
jalanLayer[i] = new google.maps.Data({
map: map,
style: {
strokeColor: 'red',
strokeWeight: 3,
fillColor: 'blue'
}
});
jalanLayer[i].loadGeoJson('<?php echo base_url('
assets / map_files / ') ?>' + jalan[i][1]);
var lt;
var lg;
jalanLayer[i].addListener('click', function(event) {
//alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
lt = parseFloat(event.latLng.lat());
lg = parseFloat(event.latLng.lng());
console.log(event.latLng.lat() + ',' + event.latLng.lng());
});
google.maps.event.addListener(jalanLayer[i], 'click', (function(nama, i) {
return function() {
var title;
jalanLayer[i].forEach(function(feature) {
title = "<div id=content>\n\
<div id=bodyContent>\n\
<table><tr><td>Nama Ruas Jalan</td><td>:</td><td><b>" + jalan[i][2] + "</b></td></tr><tr><td>Status Ruas Jalan</td><td>:</td><td><b>" + jalan[i][4] + "</b></td></tr><tr><td>Fungsi Ruas Jalan</td><td>:</td><td><b>" + jalan[i][3] + "</b></td></tr></table></div></div>";
});
infoJalan.setContent(title);
infoJalan.setPosition({
lat: lt,
lng: lg
});
infoJalan.open(map);
map.setZoom(14);
map.setCenter(infoJalan.getPosition());
};
})(jalanLayer[i], i));
google.maps.event.addListener(jalanLayer[i], 'mouseover', (function(nama, i) {
return function() {
jalanLayer[i].setStyle({
strokeColor: 'yellow'
});
};
})(jalanLayer[i], i));
google.maps.event.addListener(jalanLayer[i], 'mouseout', (function(nama, i) {
return function() {
jalanLayer[i].setStyle({
strokeColor: 'red'
});
};
})(jalanLayer[i], i));
}
for (i = 0; i < jembatan.length; i++) {
if (jembatan[i][4]) {
var icon = {
url: 'https://dispupr.baritoutarakab.go.id/assets/map_icon/jembatan.png',
scaledSize: new google.maps.Size(40, 40)
};
var position = new google.maps.LatLng(jembatan[i][2], jembatan[i][3]);
marker = new google.maps.Marker({
position: position,
map: map,
icon: icon,
title: jembatan[i][1]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
};
})(marker, i));
}
}
var area = new google.maps.Data({
map: map
});
area.loadGeoJson('<?php echo base_url() ?>assets/map_files/area/danau_butong.geojson');
area.setStyle({
fillColor: 'blue',
strokeColor: 'blue',
strokeWeight: 2
});
area.addListener('click', function(event) {
lt = parseFloat(event.latLng.lat());
lg = parseFloat(event.latLng.lng());
console.log(event.latLng.lat() + ',' + event.latLng.lng());
});
}
The DataLayer supports setting the zIndex on the Polygons in the styling function.
You didn't provide your GeoJSON, but using Google's example data, you could do something like this:
map.data.setStyle(function(feature) {
var color = 'gray';
var letter = feature.getProperty('letter')
var zIndex = 0;
if (letter) {
zIndex = 1;
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
}
return /** #type {!google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 2,
zIndex: zIndex
});
});
proof of concept fiddle
code snippet:
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: -28,
lng: 137
}
});
map.addListener('click', function(evt) {
console.log(evt.latLng.toUrlValue(6));
})
// Load GeoJSON.
map.data.addGeoJson(googleJson);
map.data.addGeoJson(googleBigPolygonJson);
// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
var letter = feature.getProperty('letter')
var zIndex = 0;
if (letter) {
zIndex = 1;
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
}
return /** #type {!google.maps.Data.StyleOptions} */ ({
fillColor: color,
strokeColor: color,
strokeWeight: 2,
zIndex: zIndex
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
if (event.feature.getProperty('letter'))
map.data.overrideStyle(event.feature, {
strokeWeight: 8
});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
}
var googleJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[123.61, -22.14],
[122.38, -21.73],
[121.06, -21.69],
[119.66, -22.22],
[119.00, -23.40],
[118.65, -24.76],
[118.43, -26.07],
[118.78, -27.56],
[119.22, -28.57],
[120.23, -29.49],
[121.77, -29.87],
[123.57, -29.64],
[124.45, -29.03],
[124.71, -27.95],
[124.80, -26.70],
[124.80, -25.60],
[123.61, -25.64],
[122.56, -25.64],
[121.72, -25.72],
[121.81, -26.62],
[121.86, -26.98],
[122.60, -26.90],
[123.57, -27.05],
[123.57, -27.68],
[123.35, -28.18],
[122.51, -28.38],
[121.77, -28.26],
[121.02, -27.91],
[120.49, -27.21],
[120.14, -26.50],
[120.10, -25.64],
[120.27, -24.52],
[120.67, -23.68],
[121.72, -23.32],
[122.43, -23.48],
[123.04, -24.04],
[124.54, -24.28],
[124.58, -23.20],
[123.61, -22.14]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[128.84, -25.76],
[128.18, -25.60],
[127.96, -25.52],
[127.88, -25.52],
[127.70, -25.60],
[127.26, -25.79],
[126.60, -26.11],
[126.16, -26.78],
[126.12, -27.68],
[126.21, -28.42],
[126.69, -29.49],
[127.74, -29.80],
[128.80, -29.72],
[129.41, -29.03],
[129.72, -27.95],
[129.68, -27.21],
[129.33, -26.23],
[128.84, -25.76]
],
[
[128.45, -27.44],
[128.32, -26.94],
[127.70, -26.82],
[127.35, -27.05],
[127.17, -27.80],
[127.57, -28.22],
[128.10, -28.42],
[128.49, -27.80],
[128.45, -27.44]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[131.87, -25.76],
[131.35, -26.07],
[130.95, -26.78],
[130.82, -27.64],
[130.86, -28.53],
[131.26, -29.22],
[131.92, -29.76],
[132.45, -29.87],
[133.06, -29.76],
[133.72, -29.34],
[134.07, -28.80],
[134.20, -27.91],
[134.07, -27.21],
[133.81, -26.31],
[133.37, -25.83],
[132.71, -25.64],
[131.87, -25.76]
],
[
[133.15, -27.17],
[132.71, -26.86],
[132.09, -26.90],
[131.74, -27.56],
[131.79, -28.26],
[132.36, -28.45],
[132.93, -28.34],
[133.15, -27.76],
[133.15, -27.17]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[138.12, -25.04],
[136.84, -25.16],
[135.96, -25.36],
[135.26, -25.99],
[135, -26.90],
[135.04, -27.91],
[135.26, -28.88],
[136.05, -29.45],
[137.02, -29.49],
[137.81, -29.49],
[137.94, -29.99],
[137.90, -31.20],
[137.85, -32.24],
[136.88, -32.69],
[136.45, -32.36],
[136.27, -31.80],
[134.95, -31.84],
[135.17, -32.99],
[135.52, -33.43],
[136.14, -33.76],
[137.06, -33.83],
[138.12, -33.65],
[138.86, -33.21],
[139.30, -32.28],
[139.30, -31.24],
[139.30, -30.14],
[139.21, -28.96],
[139.17, -28.22],
[139.08, -27.41],
[139.08, -26.47],
[138.99, -25.40],
[138.73, -25.00],
[138.12, -25.04]
],
[
[137.50, -26.54],
[136.97, -26.47],
[136.49, -26.58],
[136.31, -27.13],
[136.31, -27.72],
[136.58, -27.99],
[137.50, -28.03],
[137.68, -27.68],
[137.59, -26.78],
[137.50, -26.54]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[140.14, -21.04],
[140.31, -29.42],
[141.67, -29.49],
[141.59, -20.92],
[140.14, -21.04]
]
]
}
},
{
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[144.14, -27.41],
[145.67, -27.52],
[146.86, -27.09],
[146.82, -25.64],
[146.25, -25.04],
[145.45, -24.68],
[144.66, -24.60],
[144.09, -24.76],
[143.43, -25.08],
[142.99, -25.40],
[142.64, -26.03],
[142.64, -27.05],
[142.64, -28.26],
[143.30, -29.11],
[144.18, -29.57],
[145.41, -29.64],
[146.46, -29.19],
[146.64, -28.72],
[146.82, -28.14],
[144.84, -28.42],
[144.31, -28.26],
[144.14, -27.41]
],
[
[144.18, -26.39],
[144.53, -26.58],
[145.19, -26.62],
[145.72, -26.35],
[145.81, -25.91],
[145.41, -25.68],
[144.97, -25.68],
[144.49, -25.64],
[144, -25.99],
[144.18, -26.39]
]
]
}
}
]
}
var googleBigPolygonJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[115.950195, -19.358593],
[151.80957, -19.68994],
[155.413086, -28.73469],
[148.645508, -36.426384],
[116.477539, -36.849535],
[113.665039, -24.252746],
[115.950195, -19.358593]
]
]
}
}]
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>