Related
I am trying to add an event listener to an image layer with mapbox gl, but it doesn't seem to work, is it even possible with this type of layer? Here is a codepen demonstrating the problem:
https://codepen.io/anon/pen/drBdLm
var mapStyle = {
'version': 8,
'sources': {},
'layers': []
}
var map = new mapboxgl.Map({
container: 'map',
maxZoom: 5,
minZoom: 1,
zoom: 5,
center: [-75.789, 41.874],
style: mapStyle
})
map.on('load', function() {
map.addSource('firstim', {
type: 'image',
url: 'https://small-systems.org/dev/093-hvb/cms/site/assets/files/1104/6_umspannwerk_sellerstrasse.700x0.jpg',
coordinates: [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
})
map.addLayer({
id: 'images',
type: 'raster',
source: 'firstim',
paint: { 'raster-opacity': 1 }
})
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['images'] });
var clusterId = features[0];
// console.log(clusterId)
});
map.on('click', 'images', function (e) {
console.log(e)
});
})
I've tried adding a an event on the layer with map.on('click', layerID, function), but it does't work. Neither does using queryRenderedFeatures.
Thanks for any help.
This is not implemented yet https://github.com/mapbox/mapbox-gl-js/issues/1404.
As a workaround you'll need to listen to all click events and then do your own test to see if the click is within the bounds of your image.
so I'm gonna show two things,
1) This is the image
2) This is my code:
This is my code:
// center of the map
var center = [14.240861626831018, 121.12966240455648];
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl,
{
maxZoom: 17,
minZoom:13
}),
map = new L.Map('map',
{
attributionControl: false,
center: new L.LatLng(14.240861626831018, 121.12966240455648), zoom: 13
}),
drawnItems = L.featureGroup().addTo(map);
L.control.layers({
'osm': osm.addTo(map),
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s#189&gl=cn&x={x}&y={y}&z={z}',
{
attribution: 'google',
maxZoom: 20,
minZoom:13
}),
"monolight": L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
{
attribution: 'google',
maxZoom: 20,
minZoom:13,
id: 'mapbox.light'
}),
"dark": L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}{r}.png',
{
attribution: '© OpenStreetMap © CartoDB',
subdomains: 'abcd',
maxZoom: 20,
minZoom:13
})
}, { 'Enable markers': drawnItems },
{
position: 'bottomleft',
collapsed: true
}).addTo(map);
map.addControl(new L.Control.Draw({
position: 'bottomleft',
edit: {
edit:false,
remove: true,
featureGroup: drawnItems,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
},
// disable toolbar item by setting it to false
polygon: true,
polyline:true,
circle: false,
rectangle:false,
marker: true,
circlemarker: false
}
}));
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
map.addLayer(layer);
if (type === 'marker') {
layer.bindPopup('LatLng: ' + layer.getLatLng()).openPopup();
}
});
I was wondering if separating the markers using checkbox is possible?
I mean I want to make separate checkboxes for each marker. Like if I only want to show the lines, I can hide the markers and polygons. Sorry for the mess. Thanks!
I have a chart which has 4 series (Fiddle link below). Currently, it has Title1, Title2, Title3, and Title4. I want to change the different color for each title text name (Not the bar); for example, Title1 is red, Title2 is blue, Title3 is green, and Title4 is black. Is there a way to change all these titles with different colors?
https://jsfiddle.net/milacay/e4fe4hsz/21/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Google Chart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {callback: drawChart, packages: ['corechart']});
function drawChart() {
var array = [
["", "Today", "Goal"],
["Title1", 4553, 4151],
["Title2", 5560, 6150],
["Title3", 850, 920],
["Title4", 10505, 12320]
];
var data = new google.visualization.arrayToDataTable(array);
var formatTooltip = new google.visualization.NumberFormat({
pattern : '#,##0'
});
formatTooltip.format(data, 1);
formatTooltip.format(data, 2);
var formatShort = new google.visualization.NumberFormat({
pattern : 'short'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc : function (dt, row) {
return formatShort.formatValue(dt.getValue(row, 1));
},
type : "string",
role : "annotation"
},
2, {
calc : function (dt, row) {
return formatShort.formatValue(dt.getValue(row, 2));
},
type : "string",
role : "annotation"
},
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true,
}
},
chartArea: {right:0
, width: "80%"
, height: "80%"
},
bar: {
groupWidth: 55 // Set the width for each bar
},
legend: {position:'top'},
hAxis: {
format: 'short',
//title: 'Month',
textStyle : {
bold: true,
fontSize: 10 // fontsize for the vAxis label.
//color: 'darkblue',
},
},
vAxis: {
format: 'short',
title: 'Progress To-Date',
gridlines: { count: 8 }
},
width:320,
height:300,
bars: 'vertical',
colors: ["lightblue", "lightgray"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
if you want to change the color of the axis labels,
change those manually when the chart's 'ready' event fires,
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var array = [
["", "Today", "Goal"],
["Title1", 4553, 4151],
["Title2", 5560, 6150],
["Title3", 850, 920],
["Title4", 10505, 12320]
];
var data = new google.visualization.arrayToDataTable(array);
var formatTooltip = new google.visualization.NumberFormat({
pattern : '#,##0'
});
formatTooltip.format(data, 1);
formatTooltip.format(data, 2);
var formatShort = new google.visualization.NumberFormat({
pattern : 'short'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc : function (dt, row) {
return formatShort.formatValue(dt.getValue(row, 1));
},
type : "string",
role : "annotation"
},
2, {
calc : function (dt, row) {
return formatShort.formatValue(dt.getValue(row, 2));
},
type : "string",
role : "annotation"
},
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true,
}
},
chartArea: {right:0
, width: "80%"
, height: "80%"
},
bar: {
groupWidth: 55 // Set the width for each bar
},
legend: {position:'top'},
hAxis: {
format: 'short',
//title: 'Month',
textStyle : {
bold: true,
fontSize: 10 // fontsize for the vAxis label.
//color: 'darkblue',
},
},
vAxis: {
format: 'short',
title: 'Progress To-Date',
gridlines: { count: 8 }
},
width:320,
height:300,
bars: 'vertical',
colors: ["lightblue", "lightgray"]
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var colorIndex = 0;
var colorPallette = ['red', 'blue', 'green', 'black'];
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
if ((label.getAttribute('text-anchor') === 'middle') && (label.getAttribute('fill') !== '#404040')) {
label.setAttribute('fill', colorPallette[colorIndex]);
colorIndex++;
}
});
});
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: the label color (#404040) is used to differentiate the x-axis labels from the annotation labels...
I'm trying to add the Leaflet Draw library / control.
I can add a marker, and it persists (and stays visible). But when I add a line or polygon they aren't visible (persisted though if I inspect the .layers, also check the screenshot. The element seems to be there, but it just isn't visible).
Any guidance would be highly appreciated!
Edit: I'm using the following code to initialize the map:
var elem = angular.element('#datasetLeafletMap'); //using Angular
console.log('initting map', elem[0]);
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib });
var map = new L.Map(elem[0], { layers: [osm], center: new L.LatLng(52.105289405897, 5.2629891004852425), zoom: 13 });
console.log('map ready');
var drawnItems = new L.FeatureGroup();
var coords = [new L.latLng(51.2, 4.5), new L.latLng(51.2, 4.6), new L.latLng(51.2, 4.9)];
var poly = new L.Polyline(coords, {
color: 'blue',
opacity: 1,
weight: 5
});
drawnItems.addLayer(poly);
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
position: 'right',
polygon: {
title: 'Polygon',
allowIntersection: false,
drawError: {
color: '#b00b00',
timeout: 1000
},
shapeOptions: {
color: '#bada55'
},
showArea: true
},
polyline: {
metric: false
},
circle: {
shapeOptions: {
color: '#662d91'
}
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
console.log('adding layer', layer, drawnItems);
});
Working with leaflet api where i have added a custom marker control...
There also we can add multiple baseLayer and toggle between these layers....
Lately i was trying to bind the markers with this base layer and i can't understand the documentaion very well so having difficulty if someone help.....
Script
//Custom control for marker
L.easyButton('fa-arrow', function () {
map.on('click', function arrow(e) {
L.marker(e.latlng, { icon: arrIcon, draggable: true}).addTo(map);
map.off('click', arrow);
});
}).addTo(map);
//already added layer and needs to bind marker with this
var layerGroup = new L.LayerGroup(),
imageOverlayUrl = 'abc.jpg',
imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
featureGroup = new L.FeatureGroup().addTo(layerGroup);
var layerGroupings = { "Main": layerGroup };
var layerControl = new L.control.layers(layerGroupings,null, { collapsed: false }).addTo(map);
In short, i have a need to bind my custom marker with this layer i have defined in script, if there is a way please guide or give reference..thanks for your time
I am not sure if this is what you are looking for.
<!DOCTYPE html>
<html ng-app="demoapp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/leaflet/dist/leaflet.js"></script>
<script src="../dist/angular-leaflet-directive_dev_mapped.js"></script>
<link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var app = angular.module("demoapp", ["leaflet-directive"]);
app.controller('MixedMOverlaysMarkersNestedNoWatchController', function ($scope, leafletData, $timeout) {
var _clonedMarkers;
$timeout(function () {
//should do nothing (not watched) and only see one destroy
_clonedMarkers = angular.extend({},$scope.markers);
$scope.markers = {};
},1000);
$timeout(function () {
leafletData.getDirectiveControls().then(function (controls) {
//move all markers by a few decimal points
for (var layer in _clonedMarkers) {
var markerSet = _clonedMarkers[layer];
for (var markerName in markerSet) {
var marker = markerSet[markerName];
marker.lat += .05;
}
}
//force manual update
$scope.markers = _clonedMarkers;
controls.markers.create($scope.markers);
});
}, 4000);
angular.extend($scope, {
markersWatchOptions: {
doWatch: false,
isDeep: false,
individual: {
doWatch: false,
isDeep: false
}
},
center: {
lat: 42.20133,
lng: 2.19110,
zoom: 11
},
layers: {
baselayers: {
osm: {
name: 'OpenStreetMap',
type: 'xyz',
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '© OpenStreetMap contributors',
continuousWorld: true
}
},
cycle: {
name: 'OpenCycleMap',
type: 'xyz',
url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
layerOptions: {
subdomains: ['a', 'b', 'c'],
attribution: '© OpenCycleMap contributors - © OpenStreetMap contributors',
continuousWorld: true
}
}
},
overlays: {
hillshade: {
name: 'Hillshade Europa',
type: 'wms',
url: 'http://129.206.228.72/cached/hillshade',
visible: true,
layerOptions: {
layers: 'europe_wms:hs_srtm_europa',
format: 'image/png',
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
crs: L.CRS.EPSG900913
}
},
fire: {
name: 'OpenFireMap',
type: 'xyz',
url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
layerOptions: {
attribution: '© OpenFireMap contributors - © OpenStreetMap contributors',
continuousWorld: true
}
},
cars: {
name: 'Cars',
type: 'group',
visible: true
},
bikes: {
name: 'Bicycles',
type: 'group',
visible: false
},
runners: {
name: 'Runners',
type: 'group',
visible: false
}
}
},
markers: {
cars: {
m1: {
lat: 42.20133,
lng: 2.19110,
message: "I'm a car"
},
m2: {
lat: 42.21133,
lng: 2.18110,
message: "I'm a car"
}
},
bikes: {
m3: {
lat: 42.19133,
lng: 2.18110,
layer: 'bikes',
message: 'A bike!!'
},
m4: {
lat: 42.3,
lng: 2.16110,
layer: 'bikes'
}
},
runners: {
m5: {
lat: 42.1,
lng: 2.16910
},
m6: {
lat: 42.15,
lng: 2.17110
}
}
}
});
});
</script>
</head>
<body ng-controller="MixedMOverlaysMarkersNestedNoWatchController">
<leaflet
center="center"
markers="markers"
layers="layers"
markers-nested="true"
markers-watch-options="markersWatchOptions"
height="480px" width="100%">
</leaflet>
<h1>Overlays with nested markers no watchers example</h1>
</body>
</html>
*Source: https://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/mixed/overlays-markers-nested-no-watch-example