delete the marker along the circle around it - openstreetmap

I am working with Open Street Maps and using leaflet library.
I have a layer group like this:
var testLayer = new L.LayerGroup(); --> declared in a different file
I want to add markers to a marker group, add a circle around each marker, and add the marker group to the map:
var realMarker = L.marker([52.6432, -6.53412 ],{icon: Icon,title:data[choice][key]["name"]
}).bindPopup("Dublin").addTo(testLayer);
var circle = L.circle([52.6432, -6.53412 ],400, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(testLayer);
map.addLayer(testLayer);
However, when I delete a particular marker from the marker group by using removeLayer(), the marker is removed from the map but the circle is left behind. How can I delete the circle along with the marker?

I'd store a reference to the circle in the marker:
var realMarker = L.marker([52.6432, -6.53412 ],
{icon: Icon,title:data[choice][key]["name"]}
).bindPopup("Dublin").addTo(testLayer);
var circle = L.circle([52.6432, -6.53412 ],400, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(testLayer);
realMarker.circle=circle;
map.addLayer(testLayer);
Then, when removing the marker, also remove its circle
testLayer.removeLayer(markerToRemove);
testLayer.removeLayer(markerToRemove.circle);

Related

How to add layer over full map in apple mapkit JS

I am trying to customize my apple map on web (Mapkit JS). I know you can set the maps colorScheme (Light or Dark). But is there a better way to customize it with more colors?
Yes, you can use a PolygonOverlay and set a custom color to it. Your map will then appear in your desired color.
// init mapkit
mapkit.init({...});
// init map
const map = new mapkit.Map("mapId", {
colorScheme: mapkit.Map.ColorSchemes.Light, // mapkit.Map.ColorSchemes.Dark
});
// polygon points
const points = [
[89.9,90],
[89.9,0.1],
[89.9,-90],
[89.9,-179.999],
[0,-179.999],
[-89.9,-179.999],
[-89.9,-90],
[-89.9,0.1],
[-89.9,90],
[-89.9,179.999],
[0,179.999],
[89.9,179.999]
];
// Map the coordinate points to Coordinates:
const coordinates = points.map((point) => new mapkit.Coordinate(point[0], point[1]));
const polygon = new mapkit.PolygonOverlay(coordinates, {
style: new mapkit.Style({
lineWidth: 0,
strokeColor: "transparent", // you can define HEX values as you wish
fillColor: "#F00F00", // red overlay
}),
selected: true
})
// add overlay over the whole map
map.addOverlay(polygon);

Is there any possible way to show the properties of geojson without feature in leaflet?

In leaflet, I can visualize the geojson layers using following script;
L.geoJSON('district.json', {
style: myStyle,
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
The above code shows the features on the map and also show the name properties when clicked on map. But what I want is different. I want to hide the feature of the district.json on map, but It should be appear the popup content when I clicked on the feature position. I tried following style;
var myStyle = {
fillColor: rgb(0,0,0,0),
opacity: 0,
strokeOpacity: 0,
}
This will hide the layers, but when I clicked on the map, nothing will popup. Is there any possible styles for this conditions?
You can simply change the value of opacity to 0.01 so that the layer will disappear from the map but there still remaining the popup content.
For this change your myStyle variable in following way;
var myStyle = {
fillColor: rgb(0,0,0,0.01),
opacity: 0.01,
strokeOpacity: 0.01,
}
You could use circle markers as following:
L.geoJSON('district.json', {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {color: 'transparent', fillColor: 'transparent', radius: 20});
},
onEachFeature: function(feature, layer) {
layer.bindPopup(feature.properties.name);
}
}).addTo(map);
This way, you add a transparent, non-visible circle marker for each feature. You can also try different radius values that will lead to larger or smaller clickable areas.

leaflet.js (using geojson data) country labels incorrect

I'm using leaflet.js (with geojson) to display a map. [Removing some of the code code to make it more concise].
$.getJSON('./api/map/data', function(data){
let minZoom = 2.25
let defaultZoom = 2.25
let map = L.map('map', {
minZoom: minZoom,
zoomSnap: 0.1
}).setView([43, 0], defaultZoom);
let onEachFeature = (feature, layer) => {
var label = L.marker(layer.getBounds().getCenter(), {
icon: L.divIcon({
className: 'countryLabel',
html: feature.properties.name,
iconSize: [0, 0]
})
}).addTo(map);
};
L.geoJson(data, {
clickable: false,
style: {},
onEachFeature: onEachFeature,
}).addTo(map);
I used this website to download vector maps. Some of the labels are clearly incorrect (and some of them are almost correct). On inspection it seems like some of the lat/longs are not correctly set (or so it seems). Any feedback on how i could make this show up correctly? It would be great if i could come up with labels such that they fit the country borders (meaning maybe add country code wherever necessary).
The problem is connected with your label options. At this moment, your icon position pointing to left top corner of your label and you need to set offset to move label to the center of coordinates. Property that might help you is iconAnchor (see leaflet docs)

how to create circle in Bing maps like in gmaps "google.maps.Circle"

function addCircles(location,radius,name) {
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: location,
radius: radius
});
circles.push(cityCircle);
i am createing circle like this in gmaps is there simiar kindof option in bing maps???
There are several tools for creating circles in Bing Maps. The most common is to use the getRegularPolygon function in the spatial math module to generate the locations for a circle and then you can create either a polyline or a polygon from it. Here are a bunch of related code samples:
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_Circles
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_DrawCircle
http://bingmapsv8samples.azurewebsites.net/#DrawingTools_CustomToolbar
http://bingmapsv8samples.azurewebsites.net/#SpatialMath_AccuracyCircle
Note that there is a source code button in the top right corner of all the samples.

How to apply css on polylines : leaflet

I am working with the application which uses leaflet api.
Introduction
I needed to draw different types of fences, using decorators i can somewhat apply good visuals to the polylines but not much.
Problem
I was willing to show twisted wires instead of dashes, dots or plain lines and I know the twisted wire line will be an image but can't find help about applying custom css to polylines.
Script Example
var fence2Icon = L.icon({
iconUrl: 'xxxx.png',
iconSize: [5, 20]
iconAnchor: [5, 18]
});
// Add coordinate to the polyline
var polylineFence2 = new L.Polyline([], { color: 'red' });
function fencePlace2(e) {
// New marker on coordinate, add it to the map
new L.Marker(e.latlng, { icon: fence2Icon, draggable: false }).addTo(curr);
// Add coordinate to the polyline
polylineFence2.addLatLng(e.latlng).addTo(curr);
var decorator = L.polylineDecorator(polylineFence2, {
patterns:[{offset:5,repeat:'20px',symbol:new L.Symbol.Dash({pixelSize:5})
}]
}).addTo(curr);
}
L.easyButton('fa-flash', function () {
$('.leaflet-container').css('cursor', 'crosshair');
map.on('click', fencePlace2);
polylineFence2 = new L.Polyline([], { color: 'red' });
}).addTo(map);
If someone know anything about polyline or another way please do help.
Thanks for your time:-)
You can add a class in the options of your polyline ...
var polyline = L.polyline(latlngs, { className: 'my_polyline' }).addTo(map);
and add your own settings in the CSS ...
.my_polyline {
stroke: green;
fill: none;
stroke-dasharray: 10,10;
stroke-width: 5;
}
Here is an example: http://jsfiddle.net/FranceImage/9dggfhnc/
You can also access some options directly ...
var polyline = L.polyline(latlngs, { dashArray: '10,10' }).addTo(map);
See Path Options
If you create a polyline you're in fact adding an element to the SVG element which Leaflet uses to draw it's overlays. Styling SVG path elements is different from styling regular HTML elements. There's no such thing as border and background-color etc. It has different properties, if you're interested here's a nice read on the matter:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes
You can style Leaflet's path elements when you instanciate them via options or via CSS using the properties (related to styling) described in the documentation here:
http://leafletjs.com/reference.html#path
Via options:
new L.Polyline([...], {
weight: 3,
color: 'red',
opacity: 0.5
}).addTo(map);
Via CSS:
new L.Polyline([...], {
className: 'polyline'
}).addTo(map);
.polyline {
weight: 3,
color: red,
opacity: 0.5
}
However, what you want, using an image simply isn't possible. You can use images as fill for SVG paths, but it would be impossible for your usecase. You'de need to add a pattern definition to the SVG Leaflet is using and then you could use that id as the fill property as outlined in this answer:
https://stackoverflow.com/a/3798797/2019281 but will always fill/tile the image horizontally which won't work if your polyline is vertical.