In my leaflet code, I added markers (images) and vector images (polygon). I need to have a context menu for both, but In the case of markers context menu is visible, but not for the polygon. can anyone provide a solution for this, below is the code for polygon?
x = L.polygon([latpos,longpos],[latpos+1*scale,longpos+1*scale],[latpos+1*scale,longpos+3*scale],[latpos,longpos+2*scale],[latpos-1*scale,longpos+3*scale],[latpos-1*scale,longpos+1*scale]],{
fillColor:'black',
color:'red',
fillopacity:1.0,
fillOpacity:1.0,
contextmenu: true,
contextmenuInheritItems: false,
contextmenuItems: [{
text: 'Show coordinates',
callback: showCoordinates
}, {
text: 'Center map here',
callback: centerMap
}, '-', {
text: 'Zoom in',
callback: zoomIn
}, {
text: 'Zoom out',
callback: zoomOut
}]
}).addTo(map);
function showCoordinates (e) {
alert(e.latlng);
}
function centerMap (e) {
map.panTo(e.latlng);
}
function zoomIn (e) {
map.zoomIn();
}
function zoomOut (e) {
map.zoomOut();
}
Related
I'm making a map using the Neshan platform.
I want to show context menu of a markerŲ
I have written this code but it's not displaying the context menu
myMap.on('click', function (e) {
marker = new L.Marker(e.latlng, {
contextmenu: true,
contextmenuItems: [
{
text: 'Marker item',
index: 0
},
{
separator: true,
index: 1
}
]
}).addTo(myMap);
});
I know how to clone a HighStock tooltip and keep it visible. It is fine as long as the chart geometry is static.
However when the chart is zoomed/panned/resized, the static cloned tooltip is no longer consistent with the plots. How can I update its position? I suppose in an eventhandler in the xAxis.events.afterSetExtremes function, but I am stuck now.
Fiddle: http://jsfiddle.net/jakobvinther/xhLtr2cg/
$(function () {
cloneToolTip = null;
chart = new Highcharts.stockChart('container',{
chart: {
renderTo: 'container',
},
title: {
text: 'Click on the highlighted point to clone the tooltip.<br>Then zoom or resize. How to update the cloned tooltip position?'
},
plotOptions: {
series: {
point: {
events: {
click: function() {
if (cloneToolTip)
{
chart.container.firstChild.removeChild(cloneToolTip);
}
cloneToolTip = chart.tooltip.label.element.cloneNode(true);
chart.container.firstChild.appendChild(cloneToolTip);
}
}
}
},
xAxis:{
events: {
afterSetExtremes: function() {
// ***** probably update the cloneToolTip position here *****
}
}
}
},
series: [{
data: [1,4,3,4,2,3,1]
}]
});
});
I think that a better way to trigger the tooltip on click and keep it visible while redrawing the chart is this config: http://jsfiddle.net/BlackLabel/e8aboymw/
Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(proceed) {});
Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function(proceed, point, event, click) {
if (click) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
}
});
let curPoint,
curE;
Highcharts.chart('container', {
chart: {
events: {
render() {
if (curPoint && curE) {
this.tooltip.refresh(curPoint, curE, true)
}
}
}
},
series: [{
type: 'column',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
point: {
events: {
click: function(e) {
curPoint = this;
curE = e;
this.series.chart.tooltip.refresh(this, e, true);
}
}
}
}]
});
More about the wrap: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts#wrapping-up-a-plugin
I have a gray layer to display multiple polygons on the Mapbox map. I'm attempting to change the color of only one of them when the user clicks on it to display the "selected" the polygon. I don't want interaction, that's why I'm not using the Draw library, just to show the selected polygon.
Is there any way to do it in just one layer?? I tried adding a boolean property called "selected" to each polygon property, but I didn't achieve to update the layer.
// Define polygons with properties
var features = [];
areas.forEach(area => features.push(turf.polygon(area.polygon, { id_area: area.id_area, name: area.name, selected: 'false' })));
features = turf.featureCollection(features);
map.on('load', function () {
// Add polygons to map
map.addSource('areas', {
'type': 'geojson',
'data': features
});
// Layer settings
map.addLayer({
'id': 'polygons',
'type': 'fill',
'source': 'areas',
'paint': {
'fill-color': [
'match',
['get', 'selected'],
'true', '#64bdbb', // if selected true, paint in blue
'#888888' // else paint in gray
],
'fill-opacity': 0.4
},
'filter': ['==', '$type', 'Polygon']]
});
});
// Click on polygon
map.on('click', 'polygons', function (e) {
if(e.features.length) {
var feature = e.features[0];
if (feature.properties.id_area == id) {
feature.properties.selected = 'true';
} else {
feature.properties.selected = 'false';
}
// How can I update the layer here to repaint polygons????
}
});
Thank you in advance!
You can use a click event and feature states to change a polygon's color when selected. I put together an example of this in a CodePen here, which is based on this example from Mapbox. Code:
mapboxgl.accessToken = 'pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2s3MHkzZ3VnMDFlbDNmbzNiajN5dm9lOCJ9.nbbtDF54HIXo0mCiekVxng';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-100.486052, 37.830348],
zoom: 2
});
var clickedStateId = null;
map.on('load', function() {
map.addSource('states', {
'type': 'geojson',
'data':
'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
});
// The feature-state dependent fill-color expression will render the click effect
// when a feature's click state is set to true.
map.addLayer({
'id': 'state-fills',
'type': 'fill',
'source': 'states',
'layout': {},
'paint': {
'fill-color': [
'case',
['boolean', ['feature-state', 'click'], false],
'#64bdbb',
'#888888'
]
}
});
map.addLayer({
'id': 'state-borders',
'type': 'line',
'source': 'states',
'layout': {},
'paint': {
'line-color': '#627BC1',
'line-width': 1
}
});
// When the user clicks we'll update the
// feature state for the feature under the mouse.
map.on('click', 'state-fills', function(e) {
if (e.features.length > 0) {
if (clickedStateId) {
map.setFeatureState(
{ source: 'states', id: clickedStateId },
{ click: false }
);
}
clickedStateId = e.features[0].id;
map.setFeatureState(
{ source: 'states', id: clickedStateId },
{ click: true }
);
}
});
});
Disclaimer: I work at Mapbox
var drawnItems = new L.FeatureGroup();
leafletMap.addLayer(drawnItems);
L.drawLocal.draw.toolbar.buttons.polygon = 'Draw polygon!';
var drawControl = new L.Control.Draw({
position: 'topright',
draw: {
polyline: {
metric: true
},
polygon: {
allowIntersection: false,
showArea: true,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
}
},
circle: {
shapeOptions: {
color: '#662d91'
}
},
circle:false,
marker: false
},
edit: {
featureGroup: drawnItems,
remove: true
}
});
Hello friends,
i am using leaflet draw to draw polygon ,but after polygon is draw i want to show text inside that polygon, does that is possible.
thank you
I use a [bootbox] 1 dialog to ask for the text and [bindTooltip] 2 to put the text.
map.on(L.Draw.Event.CREATED, function(e) {
var layer = e.layer;
bootbox.prompt({title: "Any comment?", closeButton: false, callback: putTooltip});
function putTooltip(result) {
layer.bindTooltip(result, {'permanent': true, 'interactive': true});
}
});
Try using L.Tooltip with permanent set to true.
From the Leaflet.Draw github, this code snippet works with a popup:
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
editableLayers.addLayer(layer);
});
You can modify that code snippet to add a tooltip instead.
I try to apply the example Extjs 6 Google Maps but it appears an error google is not defined on GMapPanel.js file. Can anyone help me why this error displays, I mention that I've spent time to read here and on other forum why this error but nothing give me the answer? thanks in advance
viewMap.js
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
title: 'Google Map',
layout: 'fit',
width: 300,
height: 300,
items: [{
xtype: 'button',
id: 'show-btn',
text: 'Click here'
}]
});
Ext.require([
'Ext.window.*',
'Ext.ux.GMapPanel'
]);
var mapwin;
Ext.get('show-btn').on('click', function () {
// create the window on the first click and reuse on subsequent clicks
if (mapwin) {
mapwin.show();
} else {
mapwin = Ext.create('Ext.window.Window', {
autoShow: true,
layout: 'fit',
title: 'GMap Window',
closeAction: 'hide',
width: 450,
height: 450,
border: false,
x: 40,
y: 60,
mapTypeId: 'google.maps.MapTypeId.ROADMAP',
mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
items: {
xtype: 'gmappanel',
center: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
title: 'Boston Museum of Fine Arts',
listeners: {
click: function (e) {
Ext.Msg.alert('It\'s fine', 'and it\'s art.');
}
}
}, {
lat: 42.339419,
lng: -71.09077,
title: 'Northeastern University'
}]
}
});
}
});
});
GMapPanel.js
Ext.define('Ext.ux.GMapPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.gmappanel',
requires: ['Ext.window.MessageBox'],
initComponent : function(){
Ext.applyIf(this,{
plain: true,
gmapType: 'map',
border: false
});
this.callParent();
},
onBoxReady : function(){
var center = this.center;
this.callParent(arguments);
if (center) {
if (center.geoCodeAddr) {
this.lookupCode(center.geoCodeAddr, center.marker);
} else {
this.createMap(center);
}
} else {
Ext.raise('center is required');
}
},
createMap: function(center, marker) {
var options = Ext.apply({}, this.mapOptions);
options = Ext.applyIf(options, {
zoom: 14,
center: center,
mapTypeId: 'google.maps.MapTypeId.HYBRID'
});
this.gmap = new google.maps.Map(this.body.dom, options);
if (marker) {
this.addMarker(Ext.applyIf(marker, {
position: center
}));
}
Ext.each(this.markers, this.addMarker, this);
this.fireEvent('mapready', this, this.gmap);
},
addMarker: function(marker) {
marker = Ext.apply({
map: this.gmap
}, marker);
if (!marker.position) {
marker.position = new google.maps.LatLng(marker.lat, marker.lng);
}
var o = new google.maps.Marker(marker);
Ext.Object.each(marker.listeners, function(name, fn){
google.maps.event.addListener(o, name, fn);
});
return o;
},
lookupCode : function(addr, marker) {
this.geocoder = new google.maps.Geocoder();
this.geocoder.geocode({
address: addr
}, Ext.Function.bind(this.onLookupComplete, this, [marker], true));
},
onLookupComplete: function(data, response, marker){
if (response != 'OK') {
Ext.MessageBox.alert('Error', 'An error occured: "' + response + '"');
return;
}
this.createMap(data[0].geometry.location, marker);
},
afterComponentLayout : function(w, h){
this.callParent(arguments);
this.redraw();
},
redraw: function(){
var map = this.gmap;
if (map) {
google.maps.event.trigger(map, 'resize');
}
}
});
Get a key on this site https://developers.google.com/maps/documentation/javascript/
After that you have to include the maps url with your like just a parameter in url key=your key in index.html
Then it will work.
The url looks like this
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap
You have to put it inside the <script></script> tags.