In below I am trying to bring the green circle to the front by clicking the button. How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<button onclick="ccsdf()">Click me</button>
<div id="map" style="width: 100%; height: 90vh"></div>
<script>
var map;
var layer1;
var layer2;
function ccsdf() {
layer1.bringToFront();
}
$(document).ready(function(){
map = L.map('map').setView([0, 0], 14);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
layer1 = L.geoJson({ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ 0, 0.0005 ]}}]}, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: L.icon({ iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/52/Small_red_circle.png' }) });
}
}).addTo(map);
layer2 = L.geoJson({ "type": "FeatureCollection", "features": [ { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ 0, 0 ]}}]}, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {icon: L.icon({ iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/e/e7/Blue_1.png' }) });
}
}).addTo(map);
});
</script>
</body>
</html>
Any ideas?
Cheers
Below text is because stack overflow wants me to write more :-)
Lorem ipsum dolor sit amet, interdum est eu. A tellus condimentum hendrerit enim, ligula fusce vitae, leo et fusce mauris lorem suscipit scelerisque. Vel arcu, non vestibulum suspendisse non lectus magnis suspendisse, aliquam magna commodo. Nascetur eleifend at faucibus faucibus, nulla fringilla, mauris ultrices posuere in
Not sure exactly why featureGroup.bringToFront() does not seem to work in your case. It may be that it works only on vector shapes, which do have individual bringToFront() method as well, on the contrary of markers.
Anyway, you can simply use layerGroup.eachLayer() method to apply a zIndexOffset to each marker (you may need to check if the layer is an L.Marker if your group has many layers). You can simply use the marker.setZIndexOffset() method to achieve this.
function ccsdf() {
//layer1.bringToFront();
layer1.eachLayer(function (layer) {
layer.setZIndexOffset(1000);
});
}
Demo on Plunker: http://plnkr.co/edit/lQLNiR5HwX4vT84vBLAC?p=preview
This plugin will do the trick: leaflet.forceZIndex.js
// Force zIndex of Leaflet
(function(global){
var MarkerMixin = {
_updateZIndex: function (offset) {
this._icon.style.zIndex = this.options.forceZIndex ? (this.options.forceZIndex + (this.options.zIndexOffset || 0)) : (this._zIndex + offset);
},
setForceZIndex: function(forceZIndex) {
this.options.forceZIndex = forceZIndex ? forceZIndex : null;
}
};
if (global) global.include(MarkerMixin);
})(L.Marker);
To use:
var aMarker = L.marker([lat, lon], {
icon: icon,
title: title,
forceZIndex: <Value> // This is forceZIndex value
})
forceZIndex declaration will assure that ZIndex will be always set from aMarker.options.forceZIndex
Update it somewhere to re-force ZIndex value
aMarker.setForceZIndex(<New Value>)
Or setForceZIndex(null) to automatical zIndex state:
aMarker.setForceZIndex(null);
By the end of the day, if no forceZIndex option declared, Marker will work with normal behaviour.
Related
SO I am new to Mapbox but I am trying to make countries change color on hover. I have seen the hover tutorial on the Docs for states but I am having difficulty finding the right type, data, and source for countries. I have the Mapbox Countries v1 already added to the map from studio. When I try to run this code I get either that it can't find source:"country_boundaries" or "country-boundaries". I know it's something simple but appreciate the help. Thanks.
var hoveredStateId = null;
map.on('load', function () {
==>>map.addSource('states', {
==>>'type': 'geojson',
==>>'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
});
map.addLayer({
'id': 'state-fills',
==>>'type': 'fill',
==>>'source': 'states',
'layout': {},
'paint': {
'fill-color': '#627BC1',
'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
1,
0.5
]
}
});
map.addLayer({
'id': 'state-borders',
==>>'type': 'line',
==>>'source': 'states',
'layout': {},
'paint': {
'line-color': '#627BC1',
'line-width': 2
}
});
Below you will find a complete example I've put together from findings at https://docs.mapbox.com/ and other places on the internet.
Please note that this uses Mapbox example token and http://geojson.xyz/ directly, you should download the data and host it yourself if used in an production environment.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<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.eyJ1Ijoid2l0dHJ1cCIsImEiOiJjbDc1NnFpaWIwYzZqM3VudGptdjUzNWZ1In0.R5FpTsM0CeaxLhq8i8Qmyg';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // starting position [lng, lat]
zoom: 0.31741259330687854
});
map.on('load', function () {
map.addSource('cbs', { // country-boundaries-simplified
'type': 'geojson',
'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson'
});
map.addLayer({
"id": "cf", // country-fills
"type": "fill",
"source": "cbs",
"layout": {},
"paint": {
"fill-color": "#627BC1",
"fill-opacity": 0.5
}
});
map.addLayer({
"id": "cb", // country borders
"type": "line",
"source": "cbs",
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2
}
});
map.addLayer({
"id": "cfh", // country-fills-hover",
"type": "fill",
"source": "cbs",
"layout": {},
"paint": {
"fill-color": "#FFFFFF",
"fill-opacity": 1
},
"filter": ["==", "name", ""]
});
// When the user moves their mouse over the page, we look for features
// at the mouse position (e.point) and within the states layer (states-fill).
// If a feature is found, then we'll update the filter in the state-fills-hover
// layer to only show that state, thus making a hover effect.
map.on("mousemove", function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ["cf"] });
if (features.length) {
map.getCanvas().style.cursor = 'pointer';
map.setFilter("cfh", ["==", "name", features[0].properties.name]);
} else {
map.setFilter("cfh", ["==", "name", ""]);
map.getCanvas().style.cursor = '';
}
});
// Reset the state-fills-hover layer's filter when the mouse leaves the map
map.on("mouseout", function() {
map.getCanvas().style.cursor = 'auto';
map.setFilter("cfh", ["==", "name", ""]);
});
map.on("click", function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ["cf"] });
if (features.length) {
console.log(e, features[0].properties.name);
}
});
});
</script>
</body>
</html>
Hi I want to generate a heatmap from a .geojson file with this plugin
How can I manage that? I'm very new to json, leaflet and web development.
The geoJSON file I have looks something like this (with more points ofc):
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "testmarker",
"description": "This is a test description"
},
"geometry": {
"type": "Point",
"coordinates": [
-33.134766,
-60.326948
]
}
},
{
"type": "Feature",
"properties": {
"name": "testmarker2"
},
"geometry": {
"type": "Point",
"coordinates": [
-41.220703,
-62.552857
]
}
}
]
}
And here is what my index.html looks like right now.
<!DOCTYPE html>
<html = style="height: 100%;">
<head>
<title>Test Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="scripts/leaflet.css">
<script src="scripts/leaflet.js"></script>
<script src="scripts/leaflet.ajax.min.js"></script>
<script src="scripts/leaflet-heat.js"></script>
</head>
<body style="height: 100%;margin: 0;">
<div id="map" style="width: 100%; height: 100%; background: #000000;"></div>
<!-- Workaround for 1px lines appearing in some browsers due to fractional transforms
and resulting anti-aliasing.-->
<style>
.leaflet-tile-container img {
width: 256.5px !important;
height: 256.5px !important;
}
</style>
<script type="text/javascript">
// Creating the Map
var map = L.map('map').setView([58.602611, 50.350342], 4);
L.tileLayer('maps/mymap/{z}/{x}/{y}.png', {
continuousWorld: false,
noWrap: true,
minZoom: 2,
maxZoom: 6,
zoomControl: false,
minNativeZoom: 2,
maxNativeZoom: 6,
updateInterval: 200,
}).addTo(map);
// Remove old zoomControl and add new one in order to move it to bottomright
map.zoomControl.remove();
L.control.zoom({
position: 'bottomright'
}).addTo(map);
// Binds tooltip on all markers and also a popup on click if the markers has a description
function oef(feature, layer) {
if (feature.properties && feature.properties.name) {
layer.bindTooltip(feature.properties.name);
}
if (feature.properties && feature.properties.name && feature.properties.description) {
layer.bindPopup("<center><b> " + feature.properties.name + "</center></b><br>" + feature.properties.description);
}
}
var geojsonMarkers = new L.GeoJSON.AJAX(["https://raw.githubusercontent.com/***/test.geojson"],{onEachFeature:oef});
var mapOverlays={
"Test" : geojsonMarkers,
//"Test - Heat Map" : geojsonMarkersHeat,
}
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);
</script>
</body>
</html>
As you can see from above I want the heatmap to be toggleable via the mapOverlays but I don't really know how to proceed.
I have started playing around with Mapbox, and things are working as I would like, except that I have not been able to figure out how to disable clustering. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add custom icons with Markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.marker {
/*display: block;*/
border: none;
/*border-radius: 50%;*/
cursor: pointer;
padding: 0;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png');
background-size: cover;
width: 20px;
height: 27px;
/*border-radius: 50%;*/
/*cursor: pointer;*/
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmFiZWxla3QiLCJhIjoiY2p4ZXVubnQwMGVmcTN6cGU0c3JpZmM2diJ9.peecDCcSljWhChxCknv7AQ';
var coordinates = [
[6.73579, 78.72300],
[2.70886, 11.51694],
[34.05482, -57.09742],
[-39.05019, 89.79126],
[17.44893, 35.57014],
[23.60105, 168.12674],
[-4.87631, 72.99334],
[39.7392, -104.9903],
[39.79905,-105.78118],
[39.80266,-105.78692],
[39.79758,-105.78061],
[39.80314,-105.78978],
[39.80313,-105.78999],
[39.80103,-105.78272],
[39.80096,-105.78259],
[39.80187,-105.78407],
[39.80283,-105.78593],
[39.79937,-105.78134],
[39.80023,-105.78164],
[39.80272,-105.78765],
[39.80263,-105.78673],
[39.80264,-105.78676],
[39.80125,-105.78326],
[39.7976,-105.78028],
[39.80316,-105.7905],
]
var num_coordinates = Object.keys(coordinates).length
var geojson = {
"type": "FeatureCollection",
"features": []
}
for (var coord_ind = 0; coord_ind < num_coordinates; coord_ind++) {
geojson.features.push({
"type": "Feature",
"properties": {
"message": "Bar",
"iconSize": [300, 300]
},
"geometry": {
"type": "Point",
"coordinates": [coordinates[coord_ind][1], coordinates[coord_ind][0]] // Longitude then Latitude
}
})
}
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
// style: 'mapbox://styles/mapbox/satellite-v9', // stylesheet location
center: [-99.66, 38.46], // starting position [lng, lat]
zoom: 5.5 // starting zoom
});
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png', function(error, image) {
if (error) throw error;
map.addImage('pin', image);
map.addSource("photo_locations", {
type: "geojson",
data: geojson,
cluster: false,
clusterMaxZoom: 1, // Max zoom to cluster points on
clusterRadius: 1 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
"id": "points",
"type": "symbol",
"source": "photo_locations",
"layout": {
"icon-image": "pin",
"icon-size": 0.12
}
});
});
});
</script>
</body>
</html>
You can see that I have cluster: false set for my source. However, if you display this in your browser, the pins are still clustered together. If you zoom in on the pin to the west of Denver, you will see it separate into multiple pins.
How can I get clustering to disable entirely so that each individual pin can be seen at any zoom level? Any thoughts are appreciated. Thanks!
As geografa suggested, adding "icon-allow-overlap": true does the trick. This needs to be added to the layout section of the layer. So I now have:
...
"layout": {
"icon-image": "pin",
"icon-size": 0.08,
"icon-allow-overlap": true
}
...
I have one table having lots of data. Now I want to scroll vertically with table header fixed. can I achieve this?
Here is my code:
onInit: function() {
var data = new JSONModel("Model/data.json");
this.getView().setModel(data);
var otable = this.getView().byId("PlaceIt");
otable.bindItems("/employees", new ColumnListItem({
cells: [
new Text({
text: "{name}"
}),
new Text({
text: "{Physics}"
}),
new Text({
text: "{Chemistry}"
}),
new Text({
text: "{Maths}"
}),
new Text({
text: "{English}"
})
]
}));
otable.setModel(data);
var oScrollContainer = new ScrollContainer({
height: "100px",
vertical: true,
focusable: true,
content: [oTableItems]
});
},
<Table id="PlaceIt">
<columns>
<Column>
<Text text="Student Name" />
</Column>
<Column>
<Text text="Physics" />
</Column>
<Column>
<Text text="Chemistry" />
</Column>
<Column>
<Text text="Maths" />
</Column>
<Column>
<Text text="English" />
</Column>
</columns>
<!-- ... -->
</Table>
I tried using sap.m.ScrollContainer control but I'm not getting anything.
Here is a demo.
As of v1.54, the property sticky is publicly available.
sticky
Defines the section of the sap.m.Table control that remains fixed at the top of the page during vertical scrolling as long as the table is in the viewport.
Once its value is set to "ColumnHeaders", the headers will stay fixed while scrolling.
Be aware that this feature is supported only by modern browsers.
Demo: https://jsbin.com/ticivew/edit?js,output
Property description
Other sticky optionsv1.56 - The syntax for assigning multiple values in XMLView looks as follows:
<Table sticky="HeaderToolbar,InfoToolbar,ColumnHeaders">
Not sure why you don't want to use sap.m.Table, but here's an example nonetheless:
sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
data : [
{
"col1": "at curabitur vestibulum",
"col2": "porttitor pharetra rutrum",
"col3": 93
},
{
"col1": "hendrerit dui fringilla",
"col2": "adipiscing suspendisse lorem",
"col3": 36
},
{
"col1": "placerat vel placerat",
"col2": "suspendisse quis sit",
"col3": 9
},
{
"col1": "sagittis at sed",
"col2": "malesuada aliquam sit",
"col3": 26
},
{
"col1": "donec donec sed",
"col2": "dui tempor nunc",
"col3": 38
},
{
"col1": "sed vitae fringilla",
"col2": "vestibulum pretium dolor",
"col3": 17
},
{
"col1": "scelerisque curabitur orci",
"col2": "sit sollicitudin amet",
"col3": 16
},
{
"col1": "libero lacus pulvinar",
"col2": "lorem velit elit",
"col3": 15
},
{
"col1": "convallis in at",
"col2": "fringilla sagittis magna",
"col3": 35
},
{
"col1": "dolor magna sed",
"col2": "at turpis tortor",
"col3": 3
},
{
"col1": "elit mi tortor",
"col2": "quis aenean turpis",
"col3": 32
},
{
"col1": "ipsum et magna",
"col2": "amet massa aliquam",
"col3": 59
},
{
"col1": "eget magna at",
"col2": "pharetra amet porta",
"col3": 69
},
{
"col1": "magna et scelerisque",
"col2": "aliquam vitae nullam",
"col3": 4
},
{
"col1": "velit etiam odio",
"col2": "lorem lacus magna",
"col3": 28
},
{
"col1": "at scelerisque lorem",
"col2": "facilisis odio dolor",
"col3": 4
},
{
"col1": "amet ipsum massa",
"col2": "sollicitudin sed tortor",
"col3": 54
},
{
"col1": "velit tincidunt massa",
"col2": "risus tortor massa",
"col3": 7
},
{
"col1": "id amet adipiscing",
"col2": "aliquam vitae adipiscing",
"col3": 94
},
{
"col1": "lorem massa lacus",
"col2": "malesuada ac sed",
"col3": 27
}
]
});
this.getView().setModel(oModel);
}
});
sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");
/* extra CSS classes here */
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.ui.commons"></script>
<div id="uiArea"></div>
<script id="view1" type="ui5/xmlview">
<mvc:View
controllerName="view1.initial"
xmlns="sap.ui.commons"
xmlns:l="sap.ui.commons.layout"
xmlns:t="sap.ui.table"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc" >
<t:Table rows="{/data}" visibleRowCount="5">
<t:columns>
<t:Column width="100px">
<t:label><Label text="col1" /></t:label>
<t:template><TextView text="{col1}" /></t:template>
</t:Column>
<t:Column width="100px">
<t:label><Label text="col2" /></t:label>
<t:template><TextView text="{col2}" /></t:template>
</t:Column>
</t:columns>
</t:Table>
</mvc:View>
</script>
You will need two tables.
First table will have only columns and second will contain items to be displayed with empty column headers.
Second table will be the content of ScrollContainer.
demo
To get your own example working, you have to use a ScrollContainer wrapped around the table with vertical="true" and height set to some value. And you need the attribute sticky="ColumnHeaders" on the table itself.
Here is the code from your JS Bin example modified to work:
jQuery.sap.require("sap.m.MessageToast");
// Controller definition
sap.ui.controller("local.controller", {
onInit: function() {
var data = [{
name: "asd",
amount: "100",
currency: "USD",
size: "L"
}, {
name: "asd",
amount: "800",
currency: "INR",
size: "XL"
}, {
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
},{
name: "asd",
amount: "454",
currency: "USD",
size: "S"
}];
var oModel = new sap.ui.model.json.JSONModel(data);
this.getView().setModel(oModel);
var table = this.getView().byId("tableid");
var mytemplate = new sap.m.ColumnListItem({
cells: [
new sap.m.Text({
text: "{name}"
}), new sap.m.Text({
text: "{amount}"
}), new sap.m.Text({
text: "{currency}"
}), new sap.m.Text({
text: "{size}"
})
]
});
table.bindAggregation("items",{
path: "/",
template : mytemplate
});
}
});
// Instantiate the View, assign a model and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
});
oView.placeAt('content');
<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="temp">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title></title>
<script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.ap1.hana.ondemand.com/resources/sap-ui-cachebuster/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
</script>
<!-- XML-based view definition -->
<script id="view1" type="sapui5/xmlview">
<mvc:View controllerName="local.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<Page title="My View" id="page">
<ScrollContainer
height="200px"
vertical="true"
>
<Table id="tableid" sticky="ColumnHeaders">
<columns>
<Column>
<Text text="column1" />
</Column>
<Column>
<Text text="column2" />
</Column>
<Column>
<Text text="column3" />
</Column>
<Column>
<Text text="column4" />
</Column>
</columns>
</Table>
</ScrollContainer>
</Page>
</App>
</mvc:View>
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
I am trying to use the following code to highlight features under the mouse pointer.
The difference between my geojson data and the geojson data used in the linked example is that the example is made up of polygons whereas my geojson is made up of polylines. I have tried to modify the code accordingly in order that lines are highlighted however it does not work.
My geojson is accessible here:
http://iskandarblue.github.io/mapbox/data/prototype2.geojson
Any advice on what needs to be changed?
Example:
https://www.mapbox.com/mapbox-gl-js/example/hover-styles/
<!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/streets-v8',
center: [37.625224, 55.744537,],
zoom: 13
});
map.on('style.load', function () {
map.addSource("streets", {
"type": "geojson",
"data": "http://iskandarblue.github.io/mapbox/data/prototype2.geojson"
});
map.addLayer({
"id": "m_streets",
"type": "line",
"source": "streets",
"interactive": true,
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2.5
}
});
map.addLayer({
"id": "route-hover",
"type": "line",
"source": "streets",
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2.5
},
"filter": ["==", "rd_name", ""]
});
// When the user moves their mouse over the page, we look for features
// at the mouse position (e.point) and within the states layer (states-fill).
// If a feature is found, then we'll update the filter in the route-hover
// layer to only show that state, thus making a hover effect.
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", ""]);
}
});
});
});
//.addTo(map);
</script>
</body>
</html>
The route-hover layer just needs to be styled differently right? Here's a live example of your code above with a slight adjustment: https://jsbin.com/loxoquwiye/