plugin leaflet does not search on the map by layer ( leaflet-fusesearch) - leaflet

I want to customize the search on the layer "Muzei" (the field 'iconCaption'), but nothing happens... Please tell me how to correct the code...
the plugin is located at this address: https://github.com/naomap/leaflet-fusesearch
data/Muzei.js
var Muzei = {
"type": "FeatureCollection",
"metadata": {
"name": "Музеи и галереи ",
"creator": "Yandex Map Constructor"
},
"features": [{
"type": "Feature",
"id": 0,
"geometry": {
"type": "Point",
"coordinates": [104.66424966564485, 51.99642708991676]
},
"properties": {
"description": "Адрес: Тальцы, 47-й км Байкальского тракта\nКонтакты: тел.: 7 950 145‑40-75, 7 3952 24‑32-51\ne-mail: talci#irk.ru, talzimark#mail.ru\nсайт: http://www.talci.ru",
"iconCaption": "Архитектурно-этнографический музей «Тальцы»",
"marker-color": "#1e98ff"
}
}, {
"type": "Feature",
"id": 1,
"geometry": {
"type": "Point",
"coordinates": [104.28481982936044, 52.235150415839485]
},
"properties": {
"description": "Адрес: Иркутск, ул. Академическая, д. 1\nКонтакты: тел.: 73952453146;\ne-mail: bm#isc.irc.ru; \nсайт: http://www.bm.isc.irk.ru",
"iconCaption": "Байкальский музей Иркутского научного центра",
"marker-color": "#1e98ff"
}
}, {
"type": "Feature",
"id": 2,
"geometry": {
"type": "Point",
"coordinates": [104.28314107738336, 52.288654185599434]
},
"properties": {
"description": "Адрес: Иркутск, ул. Сухэ-Батора, д. 5\nКонтакты: тел.: 73952241855; \ne-mail: irkinsect#yandex.ru;\nсайт: http://biosoil.isu.ru",
"iconCaption": "Восточно-Сибирский музей микробиологии ИГУ",
"marker-color": "#1e98ff"
}
}, {
"type": "Feature",
"id": 3,
"geometry": {
"type": "Point",
"coordinates": [104.28242998112661, 52.28897985492063]
},
"properties": {
"description": "Адрес: Иркутск, ул. Сухэ-Батора, д. 5\nКонтакты: тел.: 73952241855; \ne-mail: irkinsect#yandex.ru;\nсайт: http://biosoil.isu.ru",
"iconCaption": "Восточно-Сибирский музей почвоведения им. И.В.Николаева ИГУ",
"marker-color": "#1e98ff"
}
}, {
"type": "Feature",
"id": 4,
"geometry": {
"type": "Point",
"coordinates": [104.28149027976227, 52.29116663064888]
},
"properties": {
"description": "Адрес: Иркутск, ул. Сухэ-Батора, д. 2\nКонтакты: тел.: 73952345041; \ne-mail: krek#museum.irkutsk.ru",
"iconCaption": "Выставочный зал «Спасская церковь»",
"marker-color": "#1e98ff"
}
}, {
"type": "Feature",
"id": 5,
"geometry": {
"type": "Point",
"coordinates": [104.28411953372908, 52.281967955879544]
},
"properties": {
"description": "Адрес: Иркутск, ул. Карла Маркса, д. 13\nКонтакты: 7 3952 20‑03-68, 7 3952 33‑62-30\nсайт: museum-irkutsk.com\n",
"iconCaption": "Выставочный отдел «Музейная студия» Иркутского областного краеведческого музея",
"marker-color": "#1e98ff"
}
},
}
}]
}
// serach...
var searchCtrl = L.control.fuseSearch({
position: 'topright',
title: 'Chercher',
placeholder: 'found objects',
showInvisibleFeatures: false,
showResultFct: function(feature, container) {
props = feature.properties;
var name = L.DomUtil.create('b', null, container);
name.innerHTML = props.name;
container.appendChild(L.DomUtil.create('br', null, container));
container.appendChild(document.createTextNode(props.details));
}
});
searchCtrl.addTo(map);
var streetsLayer = L.geoJson(Muzei.features, {
onEachFeature: function(feature, layer) {
feature.layer = layer;
}
});
searchCtrl.indexFeatures(streetsLayer, ['iconCaption']);
streetsLayer.addTo(map);
// or serach version 2, as in instructions
//var searchCtrl = L.control.fuseSearch()
//searchCtrl.indexFeatures(streetsLayer, ['iconCaption']);
//L.geoJson(Muzei, {
//onEachFeature: function (feature, layer) {
//feature.layer = layer;
//}
//});
//searchCtrl.addTo(map);

code earned, it is needed to download and install fuse.js, but started another problem - the objects are on the list, but click on them with mouse is not implemented.
code is shown below. unfortunately I'm not a programmer and try to deal with the issue in the course of business...therefore, I have such difficulties with functions, etc.
var searchCtrl = L.control.fuseSearch()
searchCtrl.addTo(map);
searchCtrl.indexFeatures(Muzei, ['iconCaption']);
var spots = L.geoJson(Muzei, {
onEachFeature: function (feature, layer) {
feature.layer = layer;
}
});
map.addLayer(spots)

Related

How to set map.loadImage visibility by zoom level in Mapbox GL JS?

I'm loading an image with the following code:
map.on('load', function () {
map.loadImage('....png', function(error, image) {
if (error) throw error;
map.addImage('b7', image);
map.addLayer({
"id": "b7",
"type": "symbol",
"source": {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
}
}]
}
},
"layout": {
"icon-image": "b7",
"icon-size": 0.2
}
});
});
How can i set the visibility to none, at a certain zoom level?
It looks like that you cant use map.setLayoutProperty on an loadImage. In the console, it says: Error: The layer 'b7' does not exist in the map's style and cannot be styled.
Whey i try something like:
map.setLayoutProperty( 'b7', 'visibility', 'none' );
Any ideas?
Two suggestions on how to solve this:
First, make sure your image name and layer name are different. It could be that the function is looking for b7 layer but it finds an image named b7 first (or vice versa). Either way this should be changed as it creates conflicting variables.
Second, if that doesn't work try adding your source separately instead of inside the layer.
map.addSource("mySource", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-74.981906, 41.742503]
},
"properties": {
"title": "title ",
"icon": "myImage",
}
}]
}
});
And then add the layer with the source.
map.addLayer({
"id": "b7",
"type": "symbol",
"source": "mySource",
"layout": {
"icon-image": "myImage",
"icon-size": 0.2
}
});
You can now call the setLayoutProperty on a zoomstart listener. Add a conditional if you want it only at a specific zoom level using map.getZoom(); You need to be setting the visibility for the layer here, not the image.
map.on('zoomstart', 'b7', function(e) {
if (map.getZoom() > 12) {
map.setLayoutProperty('b7', 'visibility', 'none');
}
})
Snippet is below, let me know if you encounter any problems.
map.on('load', function() {
map.loadImage('myImage.png', function(error, image) {
if (error) throw error;
map.addImage('myImage', image);
map.addSource("mySource", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.981906, 40.742503]
},
"properties": {
"title": "title ",
"icon": "myImage",
}
}]
}
});
map.addLayer({
"id": "b7",
"type": "symbol",
"source": "mySource",
"layout": {
"icon-image": "myImage",
"icon-size": 0.2
}
});
});
});
map.on('zoomstart', 'b7', function(e) {
if (map.getZoom() > 12) {
map.setLayoutProperty('b7', 'visibility', 'none');
}
})

Color Each Polygon Dynamically using mapbox?

I am trying to colour each polygon dynamically based on a computation. Is there a way possible using mapbox?
The computation is triggered when a value is selected from the dropdown, then each polygon's colour needs to be updated.
Below is the geojson source that I am adding to the map.
{
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [
{
"id": 1,
"type": "Feature",
"properties": {
"title": "Candolim"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[73.68255615234375, 15.72088240269937], [73.707275390625, 15.670643235196232], [73.97232055664062, 15.640229310707543], [73.97232055664062, 15.685187424880764], [73.95721435546875, 15.698408515946419], [73.94760131835938, 15.74071024249738], [73.8885498046875, 15.753927728167556], [73.88717651367188, 15.769787575567598], [73.86245727539062, 15.798860741939269], [73.82675170898438, 15.742032029750966], [73.68255615234375, 15.72088240269937]]]
}
},
{
"id": 2,
"type": "Feature",
"properties": {
"title": "Morjim"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[73.970947265625, 15.640229310707543], [73.70864868164062, 15.666676458207187], [73.73062133789062, 15.60584290961007], [73.76907348632812, 15.496032414238634], [73.79791259765625, 15.45765111021037], [74.17556762695312, 15.653453312049928], [74.11239624023438, 15.650808580175482], [74.08355712890625, 15.627004454829198], [74.03823852539062, 15.620391706641964], [74.02313232421875, 15.60584290961007], [73.99566650390625, 15.609810865724066], [73.98056030273438, 15.623036831528264], [73.970947265625, 15.640229310707543]]]
}
},
{
"id": 3,
"type": "Feature",
"properties": {
"title": "Panaji"
},
"geometry": {
"type": "Polygon",
"coordinates": [[[73.79928588867188, 15.458974721921672], [73.78280639648438, 15.411319377980993], [74.256591796875, 15.257689080778698], [74.29229736328125, 15.277561419418248], [74.33486938476562, 15.292133271452533], [74.31838989257811, 15.326571801420842], [74.32113647460938, 15.37027407332405], [74.2840576171875, 15.391459757417053], [74.27444458007812, 15.420586551727165], [74.27993774414062, 15.441767110328934], [74.24835205078124, 15.485445179478607], [74.27993774414062, 15.534406591252042], [74.25384521484375, 15.566159129772904], [74.26071166992188, 15.613778745064309], [74.24972534179688, 15.625681922266882], [74.24423217773438, 15.665354182093287], [74.2236328125, 15.65609800971696], [74.2071533203125, 15.658742673171389], [74.1961669921875, 15.669320984759295], [74.190673828125, 15.681220930466825], [74.17144775390625, 15.675932151334584], [74.17694091796875, 15.654775665159686], [73.79928588867188, 15.458974721921672]]]
}
}
]
}
}
You can achieve this using setPaintProperty and a "match" expression after the value is selected:
map.setPaintProperty('myLayer', 'fill-color', [
'match',
['get', 'title'],
layer.value, '#fbb03b',
/* other */ '#ccc'
]);
See this jsfiddle.

dc.js and dc.leaflet.js; wrong type of map returned

I'm trying to make a dashboard using dc.js. It has a few charts and a choroplethChart. It all worked fine, but I needed to add leaflet to the map. I've followed this sample and used dc.leaflet.js library, but instead of choroplethChart it returns Markers (see picture)
(this is how it looked before using leaflet)
The code is below and this is where geojson resides:
var usChart = dc_leaflet.choroplethChart("#us-chart");
usChart.width(1000)
.height(450)
.dimension(stateDim)
.group(totalDemandByStation)
.center([ 51.4963, -0.143 ])
.zoom(11)
.geojson(statesJson)
.colors(["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"])
.colorDomain([0, max_state])
.colors(['#fff7ec','#fee8c8','#fdd49e','#fdbb84','#fc8d59','#ef6548','#d7301f','#b30000','#7f0000'])
.colorAccessor(function(d,i) {
return d.value;
})
.featureKeyAccessor(function(feature) {
return feature.properties.name;
})
.renderPopup(true)
.popup(function(d,feature) {
return feature.properties.name+" : "+d.value;
})
.legend(dc_leaflet.legend().position('bottomright'));
//https://github.com/dc-js/dc.js/issues/419
usChart.on("preRender", function(chart) {
chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
})
usChart.on("preRedraw", function(chart) {
chart.colorDomain(d3.extent(chart.data(), chart.valueAccessor()));
})
I'm not an expert here, but the choropleth is expecting map data rather than point data. The features in your geojson are points:
{
"crs": {
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
},
"type": "name"
},
"features": [
{
"geometry": {
"coordinates": [
-0.013071299999987,
51.510716
],
"type": "Point"
},
"properties": {
"id": "940GZZDLALL",
"labelX": 30,
"lines": [
{
"name": "DLR"
}
],
"name": "All Saints",
"tfl_intid": 850
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
0.061052699999989,
51.51427850000001
],
"type": "Point"
},
"properties": {
"id": "940GZZDLBEC",
"labelX": -30,
"lines": [
{
"name": "DLR"
}
],
"name": "Beckton",
"tfl_intid": 895
},
"type": "Feature"
},
...
To draw a choropleth, Leaflet will need features whose types are Polygon.
So my guess is that Leaflet is punting and drawing markers

Can't get custom markers to work in Mapbox GL JS

I've followed both the example at Mapbox site and this instruction on GitHub but can't get markers to show on my map:
http://codepen.io/znak/pen/waPPRj (using Mapbox style and sprites)
http://codepen.io/znak/pen/PqOEyV (using custom style and sprites)
var center = [51.5, -0.1];
var map = new mapboxgl.Map({
container: 'map',
center: center,
zoom: 8,
style: 'https://www.mapbox.com/mapbox-gl-styles/styles/mapbox-streets-v7.json'
});
// Markers
map.on('style.load', function() {
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.48, -0.08]
},
"properties": {
"title": "Lorem",
"marker-symbol": "default_marker"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [51.52, -0.12]
},
"properties": {
"title": "Ipsum",
"marker-symbol": "secondary_marker"
}
}]
}
});
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}",
"text-field": "{title}",
"text-font": "Open Sans Semibold, Arial Unicode MS Bold",
"text-offset": [0, 0.6],
"text-anchor": "top"
},
"paint": {
"text-size": 14
}
});
});
All styles, JSON and PNG files with markers seem to load properly.
Any ideas?
The GeoJSON layer type of Mapbox GL JS follows the GeoJSON specification, which requires that coordinates be in longitude, latitude order. Your examples have them reversed. Flipping them shows the markers, which have the correct icons.
"geometry": {
"type": "Point",
"coordinates": [-0.12, 51.52]
}

addingand using marker variable with geoJsonData and markercluster with leaflet.js

I've been searching for hours and hours now, and i'm still stuck. I have a feeling it is something easy/stupid i'm missing.
I am using the example of markercluster from GitHub. I have 2 different markers (simply 2 different colors) that i would like to show which i would defined in the json format.
I have followed guide from leaflet site to define different markers.
I added my variable to the json part, but i can not figure out how to make the map load the different markers. It's either giving me no map or error; or it still uses the default blue marker.
here is my code:
<script type="text/javascript">
var geoJsonData = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "id":"1", "properties": { "address": "2","marker": "cmIcon"}, "geometry": { "type": "Point", "coordinates": [175.2209316333,-37.8210922667 ] } },
{ "type": "Feature", "id":"2", "properties": { "address": "151","marker": "otherIcon" }, "geometry": { "type": "Point", "coordinates": [175.2238417833,-37.80975435 ] } },
{ "type": "Feature", "id":"3", "properties": { "address": "21","marker": "cmIcon" }, "geometry": { "type": "Point", "coordinates": [175.2169955667,-37.818193 ] } },
{ "type": "Feature", "id":"4", "properties": { "address": "14","marker": "otherIcon" }, "geometry": { "type": "Point", "coordinates": [175.2240856667,-37.8216963 ] } },
{ "type": "Feature", "id":"5", "properties": { "address": "38B","marker": "cmIcon" }, "geometry": { "type": "Point", "coordinates": [175.2196982333,-37.8188702167 ] } },
{ "type": "Feature", "id":"6", "properties": { "address": "38","marker": "otherIcon" }, "geometry": { "type": "Point", "coordinates": [175.2209942 ,-37.8192782833 ] } }
]
};
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707'
});
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'marker/marker-shadow.png',
iconSize: [32, 32],
shadowSize: [36, 20],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var cmIcon = new LeafIcon({iconUrl: 'marker/marker-cm.png'}),
otherIcon = new LeafIcon({iconUrl: 'marker/marker-others.png'});
var map = L.map('map')
.addLayer(cloudmade);
var markers = new L.MarkerClusterGroup();
var geoJsonLayer = L.geoJson(geoJsonData, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.address);
}
});
markers.addLayer(geoJsonLayer);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("Vous etes ici").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
</script>
I suspect that i need to tell leaflet to get the marker variable, probably in
var geoJsonLayer = L.geoJson(geoJsonData, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.address);
}
});
but i cannot make it work.
i even tried as suggested some where else:
var geoJsonLayer = L.geoJson(geoJsonData, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.address),
layer.setIcon(feature.properties.marker);
}
});
i'm still getting an error: Uncaught TypeError: Object cmIcon has no method 'createIcon'
does anybody have an idea on how to do that?
Any help would be greatly appreciated.
Thank you in advance.
You need to tell the MarkerClusterGroup how to create the icon. The marker cluster docs show an example with a DivIcon like this:
var markers = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
return new L.DivIcon({ html: '<b>' + cluster.getChildCount() + '</b>' });
}
});
You can use your custom icon instead like this:
var markers = new L.MarkerClusterGroup({
iconCreateFunction: function(cluster) {
// decide which icon you want to use
return (cluster.getChildCount() > 10) ? cmIcon : otherIcon;
}
});