iam using this npm package
https://github.com/googlemaps/js-markerclustererplus
Iam trying to center the style and this is how.
let clusterStyle = {
textColor: 'white',
textSize: 14,
url: iconBase + 'pin-cluster-store.png',
width: 45,
height: 49
}
let mc = new MarkerClusterer(map,mapMarkers, {
maxZoom: 15,
gridSize: 50,
styles: clusterStyles
});
This is how it looks
I want it to be center of the circle. Whwn i add padding-top 16px in the console it works fine. But when i add it programatically in the "clusterstyle" nothing happends
You will need to adjust the anchors. https://googlemaps.github.io/js-markerclustererplus/interfaces/ClusterIconStyle.html
anchorIcon?: [number, number]
The anchor position (in pixels) of the cluster icon. This is the spot on the cluster icon that is to be aligned with the cluster position. The format is [yoffset, xoffset] where yoffset increases as you go down and xoffset increases to the right of the top-left corner of the icon. The default anchor position is the center of the cluster icon.
anchorText?: [number, number]
The position (in pixels) from the center of the cluster icon to where the text label is to be centered and drawn. The format is [yoffset, xoffset] where yoffset increases as you go down from center and xoffset increases to the right of center. The default is [0, 0].
Related
I'm trying to draw a circle on my Leaflet Map that should be always visible and centered even when user move or zoom in the map.
The following code works well when user move the map, but when the user zoom in or zoom out, the size of the circle is not updated. I would like to keep always the same dimension for the circle.
HTML
<div id="map" class="map" style="height:75vh;"></div>
JS
// Init Leaflet Map basically
this.map = L.map("map").setView([38.63, -90.23], 12);
window.map = this.map;
this.tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 20,
maxNativeZoom: 18,
attribution: '© OpenStreetMap, © CARTO'
});
this.tileLayer.addTo(this.map);
// Create circle that will be always visible and will have alwaus the same width.
this.circle = L.circle([38.63, -90.23], 3000, {
color: '#5d78ff',
fillOpacity: 0
}).addTo(this.map);
// Set circle always centered when map is moved.
this.map.on("moveend", (s) => {
this.circle.setLatLng(this.map.getCenter());
});
// todo: Set circle always centered when map is zoom in/out
this.map.on("zoomend", (s) => {
this.circle.setLatLng(this.map.getCenter());
console.log('test');
});
JSFIDDLE
https://jsfiddle.net/4uorasdn/
You can use CircleMarker instead of using Circle.
The relevant part of your code that needs to be changed should look something like this.
this.circle = L.circleMarker([38.63, -90.23], {
radius: 200,
color: '#5d78ff',
fillColor: '#f03',
fillOpacity: 0.2,
opacity: 1,
title: "test"
}).addTo(this.map);
And you can find a working jsfiddle here.
I create a new map with zoom equals 4:
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(39.9526, -98.5795),
mapType: 'terrain'
});
I listen for the zoom_changed event so that I can redraw my markers with a new scale:
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
$log.debug("zoom: " + zoom);
and I create my new icon here:
var greenMarkerIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
fillColor: "green",
strokeWeight: 1,
scale: map.getZoom()
}
When I zoom in, everything looks lovely. The icon grows bigger in scale as I drill down. Zooming out is where the problem is:
Click here for image of icon after reducing scale
The border of the circle becomes bigger and bigger. I've added a debug statement for the icon.strokeWeight property and it remains 1 the entire time. I'm blowing away all of my old markers and redrawing them again, so I don't know why the single marker strokeWeight is appearing bigger.
Any ideas?
I am assuming that you want to change marker icon scale on map zoom and the marker should be smaller/bigger without changing the stroke. Then you need to change only icon scale and set it to the marker:
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
console.log("zoom: " + zoom);
greenMarkerIcon.scale = (zoom + 1) * scale; // +1 is for avoiding zoom=0, scale is initial scale of icon
marker.setIcon(greenMarkerIcon);
});
check this example: http://jsfiddle.net/dUMFW/108/
The answer provided is correct.
I found out what I was doing wrong. I was creating a new marker each time the user clicked a zoom button. Markers should be created only once and the associated icon should be changed on zoom.
Thanks.
I'm using openlayers to create a map of a body. It shows the mri-scan of a person en on there are a lot of markers.
Totally zoomed out, there's a lot of whitespace (or in my case black space as the background is black) I've set up openlayers with the extent parameter, so users are not able to pan further than the image is big. However when the user hovers over the whitespace around it, and scrolls to zoom, the image is zoomed into based on the position of the cursor, so the body is out of view. Once the user starts panning again, the extent comes in to play and jumps back to the edge of the image.
Is there a way to disable zooming in/out when the cursor is outside the extent? Or if that is not possible, how can I trigger a move/pan so it jumps automatically to the edge of the image?
EDIT 14/12/2016: Created a JSFiddle to illustrate the issue.
And the code that is running there:
var pbm = {};
pbm.vars = {};
pbm.vars.extent = [0, 0, 1536, 5120];
pbm.vars.projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: pbm.vars.extent
});
/**
* initMap
* --------
* triggered by pbm.parseCases!
* outputs the bodymap to the #body-div
* this functions needs all the other ol-elements to work!
*/
pbm.initMap = function(){
pbm.map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'https://s3-eu-west-1.amazonaws.com/norvell-philips/bodymap-static-hiress.jpg',
projection: pbm.vars.projection,
imageExtent: pbm.vars.extent
})
})
],
target: 'body',//Div#body
view: new ol.View({
projection: pbm.vars.projection,
center: ol.extent.getCenter(pbm.vars.extent),
zoom: 2,
maxZoom: 5,
minZoom: 1,
extent: pbm.vars.extent
}),
renderer: 'canvas',
controls: ol.control.defaults({attribution:false, rotate: false, zoom:false}),
interactions: pbm.vars.interactions
});
}
$(document).ready(function(){
pbm.initMap();
});
This is a bug that was recently fixed. The first release to contain the fix will be v3.21.0. The ticket with links to the fixes is #5824.
I'm trying to show my my image via leaflet. My HTML and Image files are located in same folder. My images size is 1920x1080
I searched from internet and I have written this code:
<div id="map"></div>
<script>
var map = L.map('map', {
maxZoom: 20,
minZoom: 20,
crs: L.CRS.Simple
}).setView([0, 0], 20);
var imageUrl = 'test.jpg';
var southWest = map.unproject([1920, 0], map.getMaxZoom());
var northEast = map.unproject([0, 1080], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
var imageBounds = [[1920, 0], [0, 1080]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
</script>
Map has style:
<style>
#map { height: 480px; }
</style>
When I open my HTML file, leaflet shows nothing but grey background.
Did I miss something?
You do not need to unproject() the coordinates.
unproject turns map coordinates into screen pixel coordinates. You do not want to do that unless you are measuring screen pixels or positioning custom elements on the screen.
Without having a look at a live example, I can only guess that you're setting the map's bounds to an area outside the coverage of your image.
I am making simple drawing app using Paper.js and Node.js. There are 2 layers:
- bottom layer with images
- top layer for drawing.
Layer with images is background to drawing layer.
I want to make a simple eraser tool which will erase drawing on a path. I'm trying to do it adding second path in my top layer which has blendMode set to "destination-out".
drawingLayer.activate();
path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 5;
if (mode == "erase") {
path.strokeWidth = 15;
path.blendMode = 'destination-out';
}
My problem is that this "destination-out" path erases not only everything on top layer (drawing layer) but also everything on the bottom layer (images). Of course I want images to stay untouched by eraser. When I set some background in css for my page it is not erased by the eraser path.
Do you know a way to make eraser to modify one top layer while not modyfing bottom layer?
The solution is to activate the layer you want to erase in just before using the eraser tool, like this:
var firstLayer = paper.project.activeLayer; //This one is used to erase
var shapesLayer = new Layer(); // We don't want to erase on this one
so basically, when eraser tool is selected I do
firstLayer.activate();
Then when I want to draw shapes just activate the 'shapesLayer' the same way. This avoids the tool (the one used for erasing) touch anything from 'shapesLayer'
In order to do this, you have to encapsulate your drawings items and your eraser items into a group which has the blend mode source-over.
This way, the background items won't be affected by the eraser items destination-out blend mode.
Here's a simple sketch demonstrating this.
const backgroundCircle = new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'orange'
});
const foregroundCircle = new Path.Circle({
center: view.center + 20,
radius: 50,
fillColor: 'blue'
});
const eraserCircle = new Path.Circle({
center: view.center + [10, 0],
radius: 50,
fillColor: 'black',
blendMode: 'destination-out'
});
const foreground = new Group({
children: [foregroundCircle, eraserCircle],
blendMode:'source-over'
});