Develop Reference

Multiple Geojson source layer ordering problem in google maps

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>

how to get dashed line by setStyle function of google map with geojson

i am trying to get the dashed line by linestring of geojson in google map. and i can't use the polyline for this dashed line i have to use the linestring of geojon. so how can i set the style of dashed line in setStyle function for dahsed line. what should i try to do this. here is the fiddle link : http://jsfiddle.net/geocodezip/7z078g8e/1/
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lng: -73.945259, lat: 41.133659},
zoom: 15
});
map.data.addGeoJson({ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
"properties": {"prop0": "value0"}
},
{ "type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-73.945259094199997, 41.133659362800003],
[-73.945625305199997, 41.178726196299998],
[-73.978820800799994, 41.2158432007],
[-73.978256225600006, 41.249233245799999],
[-73.954887390099998, 41.288650512700002],
[-73.986076354999994, 41.322223663300001],
[-73.965789794900004, 41.352313995400003],
[-73.957283020000006, 41.382507324199999],
[-73.968963622999993, 41.410072326700003],
[-73.989562988299994, 41.439929962199997],
[-74.015953064000001, 41.464096069299998],
[-74.006843566900002, 41.499134063699998],
[-73.999168396000002, 41.5377388],
[-73.9613571167, 41.581764221199997],
[-73.956344604500003, 41.627635955800002],
[-73.948852539100002, 41.678043365500002],
[-73.946556091299996, 41.729282379200001],
[-73.9569854736, 41.7779464722],
[-73.9701004028, 41.828430175800001],
[-73.985443115199999, 41.881973266599999],
[-74.006584167499994, 41.924633026099997],
[-73.991699218799994, 41.975730896000002],
[-73.982696533199999, 42.033111572300001],
[-73.962783813499996, 42.085037231400001]
]
}
}]});
map.data.setStyle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 10,
});
}
google.maps.event.addDomListener(window, "load", initMap);

As a first cut add the "dashed line" styling from the example in the documentation
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
map.data.setStyle({
strokeColor: "#FF0000",
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
proof of concept fiddle
code snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lng: -73.945259,lat: 41.133659},
zoom: 15
});
// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
map.data.setStyle({
strokeColor: "#FF0000",
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
});
map.data.addGeoJson({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [102.0, 0.5]
},
"properties": {
"prop0": "value0"
}
},
{
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[-73.945259094199997, 41.133659362800003],
[-73.945625305199997, 41.178726196299998],
[-73.978820800799994, 41.2158432007],
[-73.978256225600006, 41.249233245799999],
[-73.954887390099998, 41.288650512700002],
[-73.986076354999994, 41.322223663300001],
[-73.965789794900004, 41.352313995400003],
[-73.957283020000006, 41.382507324199999],
[-73.968963622999993, 41.410072326700003],
[-73.989562988299994, 41.439929962199997],
[-74.015953064000001, 41.464096069299998],
[-74.006843566900002, 41.499134063699998],
[-73.999168396000002, 41.5377388],
[-73.9613571167, 41.581764221199997],
[-73.956344604500003, 41.627635955800002],
[-73.948852539100002, 41.678043365500002],
[-73.946556091299996, 41.729282379200001],
[-73.9569854736, 41.7779464722],
[-73.9701004028, 41.828430175800001],
[-73.985443115199999, 41.881973266599999],
[-74.006584167499994, 41.924633026099997],
[-73.991699218799994, 41.975730896000002],
[-73.982696533199999, 42.033111572300001],
[-73.962783813499996, 42.085037231400001]
]
}
}
]
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Google Maps API: getFeatureById for feature collection not working

I try to change the style of a specific feature of a feature collection data overlay. This is a snippet of my json:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"id": 1,
"properties": {
"name": "1 CBD - Bankenviertel",
"color": "transparent",
"isHovered": false,
"isActive": false
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
8.67279430349,
50.1143807311
],
[
8.67280054398,
50.1143975981
]
]
]
}
}
and this is the relevant snippet from my map.js
map.data.loadGeoJson('some.json');
console.log(map.data.getFeatureById(1));
And I am always getting "undefined" in the console.
What am I doing wrong here?
Thanks,
Robert

You need to call map.data.getFeatureById(1) inside the callback function (so it doesn't execute before the GeoJson has loaded).
from the documentation:
loadGeoJson(url:string, options?:Data.GeoJsonOptions, callback?:function(Array<Data.Feature>))
Return Value: None
Loads GeoJS
proof of concept fiddle
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
zoom: 4,
center: {
lat: -28,
lng: 137
},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// map.data.addGeoJson(geoJson);
map.data.loadGeoJson(
'https://api.myjson.com/bins/1teyu', {},
function(features) {
console.log(map.data.getFeatureById(1));
console.log(map.data.getFeatureById(1).getProperty("letter"));
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

highlight feature with click in mapbox gl

I have a geojson layer of streets that are highlighted when moused-over.
My objective is now to highlight individual streets red with a click event. Only one street should be able to be highlighted at a time, and should remain highlighted until a different street is clicked.
Any idea as to what needs to be added to the following code?
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet'/>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-opacity": 0.0,
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#f48024",
"line-opacity": 0.9,
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
map.addLayer({
"id" : "street_toggle",
"source": "streets",
"type": "line",
"layout": {"line-join": "round",
"line-cap": "round"},
"paint": {
"line-color": "#FF0000",
"line-opacity": 0.9,
"line-width:": 3.5
}
});
map.on('mousemove', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["m_streets"]
}, function (err, features) {
if (!err && features.length) {
map.setFilter('route-hover', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('route-hover', ['==', 'rd_name', '']);
}
});
});
map.on('click', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["street_toggle"]
}, function (err, features) {
if (!err && features.length) {
map.setFilter('street_toggle', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('street_toggle', ['==', 'rd_name', '']);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.15.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537, ],
zoom: 13
});
map.on('style.load', function() {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-opacity": 0.0,
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#f48024",
"line-opacity": 0.9,
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
map.addLayer({
"id": "street_toggle",
"source": "streets",
"type": "line",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "#FF0000",
"line-opacity": 0.9,
"line-width:": 3.5
}
});
map.on('mousemove', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["m_streets"]
}, function(err, features) {
if (!err && features.length) {
map.setFilter('route-hover', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('route-hover', ['==', 'rd_name', '']);
}
});
});
map.on('click', function(e) {
map.featuresAt(e.point, {
radius: 5,
layer: ["street_toggle"]
}, function(err, features) {
if (!err && features.length) {
map.setFilter('street_toggle', ['==', 'rd_name', features[0].properties.rd_name]);
} else {
map.setFilter('street_toggle', ['==', 'rd_name', '']);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>
If you take a look at the console output when running your code, you should see this error message:
layers.street_toggle.paint.line-width:: unknown property "line-width:"
Because of this error, the street_toggle layer is not being added to the map and the click interaction is not working.
To fix the problem, please change the "line-width:" key to "line-width"(remove the spurious colon inside the quotes)

#Lucas features At() must be a depreciated method? His colon did throw a bug, but it doesn't help him select a road segment, at least at v0.16, right? I use queryRenderedFeatures()
note: I really wish this method had a optional radius parameter - you really have to click precisely on the line.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML markers from geoJSON url</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.0/mapbox-gl.css' rel='stylesheet'/>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpbHIxMXA3ejAwNWl2Zmx5aXl2MzRhbG4ifQ.qsQjbbm1A71QzVg8OcR7rQ';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/dark-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource('streets', {
"type": "geojson",
"data": "https://iskandarblue.github.io/mapbox/data/simplify_prototype.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "red",
// "line-opacity": 0.0,
"line-width": 2.5
}
});
map.on('click', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['m_streets'] });
if (!features.length) {
return;
}
if (typeof map.getLayer('selectedRoad') !== "undefined" ){
map.removeLayer('selectedRoad')
map.removeSource('selectedRoad');
}
var feature = features[0];
//I think you could add the vector tile feature to the map, but I'm more familiar with JSON
console.log(feature.toJSON());
map.addSource('selectedRoad', {
"type":"geojson",
"data": feature.toJSON()
});
map.addLayer({
"id": "selectedRoad",
"type": "line",
"source": "selectedRoad",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "yellow",
"line-width": 8
}
});
});
});
</script>
</body>
</html>

add infoWindow to map marker using json

I have a simple script that adds a markers on a map, data have been taken from json. I want to add a basic infoWindow to all markers, so that when you click on it, it says "Cartier".
Could you tell me what i'm doing wrong with InfoWindow code?
The code is below.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 2,
center: {lat: 37.275, lng: 22.549},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
script.src = 'http://pastebin.com/raw.php?i=7X956uB3';
document.getElementsByTagName('head')[0].appendChild(script);
map.data.setStyle(function(feature) {
var jstores = feature.getProperty('jstores');
return {
icon: getCircle(jstores),
title: (jstores)
};
});
var contentString = '<div id="content">Cartier</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
function getCircle(jstores) {
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: .2,
scale: Math.sqrt(jstores) * 2,
strokeColor: 'white',
strokeWeight: .5
};
return circle;
}
function jewellery_stores(results) {
map.data.addGeoJson(results);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Sample JSON:
jewellery_stores({ "type": "FeatureCollection","features": [
{"type": "Feature","geometry": {"type": "Point", "coordinates": [139.730407, 35.70883]},"properties": {"jstores": 106 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [37.615556, 55.752222]},"properties": {"jstores": 94 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [2.3524282, 48.8564528]},"properties": {"jstores": 89 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [55.277067, 25.176594]},"properties": {"jstores": 66 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [-0.1276597, 51.5072759]},"properties": {"jstores": 64 }},
{"type": "Feature","geometry": {"type": "Point", "coordinates": [114.169551, 22.285261]},"properties": {"jstores": 63 }}]
Thank you in advance,
Andrey

You are using the Google Maps Javascript API v3 Data Layer
That supports click listeners which allow you to open infowindows containing properties included in the JSON.
map.data.addListener('click', function (e) {
infowindow.setPosition(e.latLng);
infowindow.setContent("hello world<br>jstores="+e.feature.getProperty("jstores")+"<br>"+e.latLng.toUrlValue(6));
infowindow.open(map);
});
Working code snippet:
var map;
var infowindow = new google.maps.InfoWindow({});
function initialize() {
var mapOptions = {
zoom: 2,
center: {
lat: 37.275,
lng: 22.549
},
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
script.src = 'https://pastebin.com/raw.php?i=7X956uB3';
document.getElementsByTagName('head')[0].appendChild(script);
map.data.setStyle(function(feature) {
var jstores = feature.getProperty('jstores');
return {
icon: getCircle(jstores),
title: (jstores)
};
});
}
function getCircle(jstores) {
var circle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: 0.2,
scale: Math.sqrt(jstores) * 2,
strokeColor: 'white',
strokeWeight: 0.5
};
return circle;
}
function jewellery_stores(results) {
map.data.addGeoJson(results);
map.data.addListener('click', function(e) {
infowindow.setPosition(e.latLng);
infowindow.setContent("hello world<br>jstores=" + e.feature.getProperty("jstores") + "<br>" + e.latLng.toUrlValue(6));
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>