Related
I created a simple web map and now I am stacked on how to use the highlight function on hover. I tried to use the tutorial on the Leaf js site, but when I am trying to call the highlight function under geoJason variable, it is not working. Basically I want the polygon to be highlighted when hovered. The popup is working just fine.
Here is my script, without the highlight function.
ar map = L.map('map').setView([43.0982, -89.3811], 12);
var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
minZoom: 1,
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3'],
attribution: '<a href="https://www.google.com/maps" target=_blank> Google Sattellite Map</a>' }).addTo(map);
// Adding the geoJason file and styling it.
var myStyle = {
fillColor: "#2c7fb8",
color: "#f20b0b",
weight: 1,
opacity: 1,
fillOpacity: 0.55
};
// Alder district was a geoJason file and now it saved as js file.
var geojason = L.geoJSON(alderdstricts, {
style:myStyle,
onEachFeature:districtdata,
}).addTo(map);
// Function to bind popup to the geoJason data.
function districtdata(feature, layer){
layer.bindPopup("<span class='headings'>District: </span>" + feature.properties.ALD_DIST + "<br>" +
"<span class='headings'>Representative: </span>" + feature.properties.Representa + "<br>"
+ "<span class='headings'>Contact Representative: </span>" + feature.properties.ContactRep + "<br>"
+ "<span class='headings'>District Population: </span>" + feature.properties.DistrictPo
+ "<span class='headings'></span>" + feature.properties.Image)
};
I added all of my script above except the highlight function and that is where I am stacked.
var map = L.map('map').setView([43.0982, -89.3811], 12);
var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{ minZoom: 1, maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'], attribution: ' Google Sattellite Map' }).addTo(map);
// Adding the geoJason file and styling it.
var myStyle = {
fillColor: "#2c7fb8",
color: "#f20b0b",
weight: 1,
opacity: 1,
fillOpacity: 0.55
};
// Alder district was a geoJason file and now it saved as js file.
var geojason = L.geoJSON(alderdstricts, { style:myStyle, onEachFeature:districtdata,
}).addTo(map);
// Function to bind popup to the geoJason data.
function districtdata(feature, layer){
layer.bindPopup("District: " + feature.properties.ALD_DIST + "
" + "Representative: " + feature.properties.Representa + "
" + "Contact Representative: " + feature.properties.ContactRep + "
" + "District Population: " + feature.properties.DistrictPo + "" + feature.properties.Image)
layer.on('mouseover', function(e) {
e.target.setStyle({
fillOpacity: 0.8
});
});
layer.on('mouseout', function(e) {
e.target.setStyle({
fillOpacity: 0.55
});
});
};
I'm not sure what you tried, but this should work. It simply adds a "mouseover" and "mouseout" event handler for each polygon, as well as your pop-up. If this doesn't work, please let me know what errors/behaviour you get.
In general, it's best to provide details on what solutions you have already tried in your question. Also, just FYI, JSON is not a contraction of Jason, it stands for JavaScript Object Notation.
I am using Leaflet Routing Machine to create map route.
My requirement is, if there are multiple locations like A, B, C, D, E. I am getting the length of svg path from A to E. But i need length form A to B, B to C, C to D, D to E. Please help someone.
click to see image
Red color line is svg path. So, when i click on any marker then i need length from basel to that marker. i mean, i need to get length from basel to neuchatel or basel to bern or neuchatel to bern, etc.
var routeControl = L.Routing.control({
waypoints: waypoints,
reverseWaypoints: false,
lineOptions: {
styles: [{color: 'red', opacity: 1, weight: 3}]
},
geocoder: L.Control.Geocoder.nominatim({
serviceUrl: 'http://localhost:8084/'
}),
createMarker: function(i, wp, nWps) {
console.log(wp)
let custom_icon = L.divIcon({
iconSize: [100, 20],
popupAnchor: [-30, -18],
shadowUrl: '',
html: '<div class="notification '+wp.name+'" data-pathid="'+(i+1)+'" style="color: #000;background-color: transparent;"><img src="img/blue.png"><span class="city-name">' + latlng[i].name + '</span></div>'
})
marker = L.marker(
[wp.latLng.lat, wp.latLng.lng],
{
icon: custom_icon
})
.bindPopup(latlng[i].name)
.openPopup()
.addTo(map);
// marker.on('click', onMarkerClick);
}
}).addTo(map);
I've got custom icons working in my Leaflet map just fine when I run gatsby develop locally, but when I try to build I get an error related to my custom marker icon:
WebpackError: TypeError: leaflet_src_layer_marker__WEBPACK_IMPORTED_MODULE_4__.Icon is not a constructor
Related imports:
import { Map, Marker, Popup, TileLayer, Tooltip, ZoomControl } from 'react-leaflet'
import { Icon } from 'leaflet/src/layer/marker'
Create custom icon:
// Init custom map icon
const mapIcon = MapIcon();
const markerIcon = new Icon({
iconUrl: mapIcon,
iconSize: [36, 36],
iconAnchor: [18, 18],
shadowSize: [36, 36],
shadowUrl: 'https://unpkg.com/leaflet#1.5.1/dist/images/marker-shadow.png',
shadowAnchor: [10, 18],
popupAnchor: [0, -16],
tooltipAnchor: [13, -4]
});
JSX:
{ markerData.length > 0 ? markerData.map((node, index) => (
<Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={markerIcon}>
<Popup className="leaflet-popup" onOpen={(el) => openPopup(el)}>
<h5 className="popup-location-title">{node.location_title}</h5>
<h6 className="popup-address">{node.address}</h6>
<div className="popup-description" dangerouslySetInnerHTML={{ __html: node.description }}></div>
{!!node.embed ?
<div className="popup-embed">
<Embed url={node.embed} className="popup-media-embed" />
</div>
: null}
</Popup>
<Tooltip className="leaflet-tooltip">
<span className="title">{node.location_title}</span>
<span className="address">{node.address}</span>
</Tooltip>
</Marker>
)) : null }
I've tried all the solutions listed here: https://github.com/Leaflet/Leaflet.markercluster/issues/874. I've also looked at several similar questions. Nothing seems to help. For instance, I also tried importing leaflet like so import * as L from "leaflet" and like so import L from "leaflet". And then creating the new icon like so const markerIcon = L.Icon({, like so const markerIcon = L.icon({, like so const markerIcon = new L.Icon({, and like so const markerIcon = new L.icon({. I can console.log(L), but none of these works.
I would love some assistance.
Got it to build. I had to wrap the icon construction in a check for the window obj:
// Init custom map icon
if (typeof window !== 'undefined') {
const mapIcon = MapIcon();
markerIcon = new Icon({
iconUrl: mapIcon,
iconSize: [36, 36],
iconAnchor: [18, 18],
shadowSize: [36, 36],
shadowUrl: 'https://unpkg.com/leaflet#1.5.1/dist/images/marker-shadow.png',
shadowAnchor: [10, 18],
popupAnchor: [0, -16],
tooltipAnchor: [13, -4]
});
}
And again when passing the icon to the marker:
<Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={(!!markerIcon) ? markerIcon : null}>
I am working with a mapbox map on a web page, and have everything working fine with the map and dropping pins, but cant get custom markers working.
My code that is working for dropping a pin is:
L.mapbox.featureLayer({
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description', 'marker-size':'large', 'marker-color':'#cc0000', 'marker-symbol':'building' }
}).addTo(map);
This works and populates the map with my locations.
I have used this code to try and add a custom marker, but this doesnt work:
L.mapbox.featureLayer({
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description', icon: { iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut1.png', iconSize: [50, 50], iconAnchor: [25, 25], popupAnchor: [0, -25], className: 'dot' } }
}).addTo(map);
I also have multiple pins and other layers on the map that can be turned on or off, and everything is working well, I just cant get this custom marker to work at all!
Does anyone have custom markers working with code like this on mapbox?
I don't think you can specify custom marker options like icon like that in the main GeoJSON properties hash.
I believe you would need to do something like the below instead.
var customIcon = new L.Icon({iconUrl: 'https://www.mapbox.com/mapbox.js/assets/images/astronaut1.png', iconSize: [50, 50], iconAnchor: [25, 25], popupAnchor: [0, -25], className: 'dot' })
L.mapbox.featureLayer(
{
type: 'Feature',
geometry: { type:'Point', coordinates:[$longitude, $latitude] },
properties: { title:'My Location', description:'My Description'}
},
{
pointToLayer: function(feature,latLng) { return L.marker(latLng, {icon: customIcon}}
}).addTo(map);
See https://www.mapbox.com/mapbox.js/api/v2.2.2/l-mapbox-featurelayer/
How to format the tooltip text of Google Visualization Api based Line and Bar Charts.
I want custom text and images in the tooltip.
Thanks
Just drop this code into Google's Visualization playground as an example I'm using bar chart and editing the text of the tooltip:
function drawVisualization() {
data = new google.visualization.DataTable()
data.addColumn('string', 'Date');
data.addColumn('number');
data.addColumn({type:'string',role:'tooltip'});
data.addRow();
base = 10;
data.setValue(0, 0, 'Datapoint1');
data.setValue(0, 1, base++);
data.setValue(0, 2, " This is my tooltip1 ");
data.addRow();
data.setValue(1, 0, 'Datapoint2');
data.setValue(1, 1, base++);
data.setValue(1, 2, "This is my second tooltip2");
// Draw the chart.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data, {legend:'none', width:600, height:400});
}
There seems to be some details on how to do this here
http://code.google.com/apis/chart/interactive/docs/examples.html
Scroll down to the bottom, its the last example.
Paste this at: https://code.google.com/apis/ajax/playground/?type=visualization#simple_dashboard
function drawVisualization() {
// Prepare the data
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Donuts eaten');
data.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
data.addRows([
['Sven', 16, createCustomHTMLContent('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRnV6emFCNN90Nt-HQcd_x5umqdoSpagUp5fwOqc5QYnVpEHHF8', 16)],
['Kurt', 46, createCustomHTMLContent('http://173.199.167.192/customavatars/avatar296423_1.gif', 46)],
['Sofie', 27, createCustomHTMLContent('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbv9ijKCwG3eJS9uUTxPzJ5F8zqYRAA5uRkyfz5lniC7TN8t96', 27)],
['Lisa', 29, createCustomHTMLContent('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQLZSgX1oDVc5psdBdqzG8oU-1vqTEIMXw-FDvoSLOg0oJ-0VLv', 29)],
['Lajla', 19, createCustomHTMLContent('http://static3.depositphotos.com/1001992/155/i/950/depositphotos_1550168-Portrait-of-a-beauty-young-female-face.jpg', 19)],
['Elsa', 38, createCustomHTMLContent('http://os1.i.ua/3/2/10725917_2535e604.jpg', 38)],
]);
function createCustomHTMLContent(flagURL, totalEaten) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + flagURL + '" style="width:75px;height:50px"/><br/>' +
'<table>' +
'<tr>' +
'<td><img src="http://2.bp.blogspot.com/-hPs6JLOBj4I/UTBQWNhHFaI/AAAAAAAABOQ/LROTO_TAYRQ/s72-c/donat-makanan-lemak-trans.jpg" style="width:25px;height:25px"/><td/>' +
'<td><b>' + totalEaten + '<b/><td/>' +
'<tr/>' +
'<table/>' +
'<div/>';
}
// Define a slider control for the 'Donuts eaten' column
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Donuts eaten',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a pie chart
var piechart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {
'width': 600,
'height': 300,
'legend': 'bottom',
'tooltip': {
'isHtml': true
},
'pieSliceText': 'value'
}
});
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the slider to affect the piechart
bind(slider, piechart).
// Draw the dashboard
draw(data);
}
Here you have some examples with tooltips
Link
So there is example with column chart:
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Country');
// Use custom HTML content for the domain tooltip.
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn('number', 'Gold');
dataTable.addColumn('number', 'Silver');
dataTable.addColumn('number', 'Bronze');
dataTable.addRows([
['USA', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/2/28/Flag_of_the_USA.svg', 46, 29, 29), 46, 29, 29],
['China', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg', 38, 27, 23), 38, 27, 23],
['UK', createCustomHTMLContent('http://upload.wikimedia.org/wikipedia/commons/a/ae/Flag_of_the_United_Kingdom.svg', 29, 17, 19), 29, 17, 19]
]);
var options = {
title: 'London Olympics Medals',
colors: ['#FFD700', '#C0C0C0', '#8C7853'],
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true }
};
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('custom_html_content_div')).draw(dataTable, options);
}
function createCustomHTMLContent(flagURL, totalGold, totalSilver, totalBronze) {
return '<div style="padding:5px 5px 5px 5px;">' +
'<img src="' + flagURL + '" style="width:75px;height:50px"><br/>' +
'<table id="medals_layout">' + '<tr>' +
'<td><img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Gold_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalGold + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="http://upload.wikimedia.org/wikipedia/commons/0/03/Silver_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalSilver + '</b></td>' + '</tr>' + '<tr>' +
'<td><img src="http://upload.wikimedia.org/wikipedia/commons/5/52/Bronze_medal.svg" style="width:25px;height:25px"/></td>' +
'<td><b>' + totalBronze + '</b></td>' + '</tr>' + '</table>' + '</div>';
}e