How to add square tiles to leaflet map with hovering effect? - javascript

I want to split my map into tiles/territories. So i've prepared another layer showing squares. But this layer is full of .png image files so there is no data/object for this squares.
I've also tried to draw squares with leaflet's geometry objects. But it causing performance issues, there is times to show 500+ squares.
If you develop something like that what method would you prefer? UTFGrid? GeoJSON/Geometry? Or maybe any other better solution?
UPDATE:
Actually i don't want to get data belongs to square's territory i just want to change the square's color somehow i mean somehow i want to highlight that area maybe i can create a rectangle on the fly when user mouseover.
And im trying avoid to use UTFGrid for just highlighting. But I want to ensure the UTFGrid is the only way or not.

This sounds like the exact reason that UTFGrid was created! This site links to the tutorial that I used when learning UTFGrid, and it is solid.
Updated after your update:
MarkerCluster might have the look/feel you are going after, they basically paint a polygon onto the map layer. You can check the source here, and here's a relevant snippet:
_showCoverage: function (e) {
var map = this._map;
if (this._inZoomAnimation) {
return;
}
if (this._shownPolygon) {
map.removeLayer(this._shownPolygon);
}
if (e.layer.getChildCount() > 2 && e.layer !== this._spiderfied) {
this._shownPolygon = new L.Polygon(e.layer.getConvexHull(), this.options.polygonOptions);
map.addLayer(this._shownPolygon);
}
},

Related

Leaflet Map is Zooming out too far

Using NodeJS to drop datapoints on a map via Leaflet.
Current issue:
When I scroll out, I can't get the map region to be locked to one Earth. That is, when I scroll out all the way, I end up with 5 copies of Earth, unique from each other. I want the map to be locked to one frame of the Earth.
Methods tried:
I've tried using Map.setView, setZoom, fitBounds, setMaxBounds/maxBounds (which was successful in locking panning, but not scrolling). As far as I can tell I've been using these correctly/in the correct places, but still to no avail.
Figured it out Eugen!
Needs to be set in the initializeLeaflet method. Code added to fix it seen at the bottom of this block.
initializeLeaflet() {
const mapRoot = this.template.querySelector('.map-root');
this.map = L.map(mapRoot);
this.map.fitWorld();
L.control.scale().addTo(this.map);
this.map.setMinZoom(2);
this.map.setMaxZoom(8);
}

Using a polygon as a marker with leaflet

I currently have a map for a game with item locations, i'm wanting to add animals to the side bar/legend but as a polygon instead of a marker, i get how to draw a polygon but i cannot figure out how to make it only show when selected from the legend (or even how to add one to the legend). Sorry for this very basic question.
I'm really very new to this, I only started learning about leaflet to make a map for a game, so i'm not really sure how to explain what i've done.. so i'll try my best:
I have a list of markers like:
var marker_combulbrsh2 = L.marker([-1474, 2661.5])
.bindPopup('Common Bullbrush');
and then i have the layer groups that have lines this like:
var lg_combulbrsh = L.layerGroup([
marker_combulbrsh1, marker_combulbrsh2
]);
and then an overlay list with the layer groups like:
"<i>Common Bullbrush" : lg_combulbrsh,
and then i have them display on the map with:
L.control.layers(null, overlays, {collapsed:true, position: 'topleft'}).addTo(map);
I am wanting to add a series of polygons that are selectable from the side panel/legend in the same way that the above L.marker is, so that I don't have to add individual locations that are close together for adding animal locations to the map.
`var polygonPoints = [
[-2263, 432],
[-2361, 435],
[-2337, 674],
[-2263, 432]];
var poly = L.polygon(polygonPoints).addTo(map);`
The code above draws the polygon i want to draw, but it's permanently there and I haven't been able to figure out how to make it a selectable item like the L.markers are. I figure i have to add the polygon as a marker some how and then have that marker added to the layer group and create an entry for them on the overlay list and then have them display through L.control.layers - I just cannot wrap my head around how though.
again, sorry for this very basic question and thank you to anyone who reads. if you are able to help with this and would like credit added to the website with a link to your work or social media or something i'm more than happy to do so.

Which 3 marker creates a triangle that contains specified point?

I have a map with ~50 markers on it (Google maps api v3) and I'd like to click a random point and get which 3 markers surrounds it.
I've found this example, but it doesn't really do the thing i want alone.
Here's an image of my markers and what I'm trying to accomplish:
[IMAGE]
According to image;
When I click to red point, the script should return me the coordinates of those 3 markers connected with yellow lines.
Same for blue point and green lines.
It has to be the narrowest, smallest triangle.
I've tried finding closest 3 markers, it works for most situations but doesn't cover all. (Like when there's 3 markers in the same line with a close range.)
Any advice? Thanks in advance!
Edit
ps. I can use PHP with ajax calls if it helps.
Did it using PHP, by looping all marker coordinates.
First I checked if a point is in the triangle using this class
Then checked if its' area is smaller than the last one.
/* 3 foreach loops{ */
$pointLocation = new pointLocation();
$polygon = array($A['y'].' '.$A['x'], $B['y'].' '.$B['x'], $C['y'].' '.$C['x'], $A['y'].' '.$A['x']);
$point = $P['y'].' '.$P['x'];
if(($pointLocation->pointInPolygon($point, $polygon)=='inside' || $pointLocation->pointInPolygon($point, $polygon) == 'vertex'))
// Here I check the area using another function and save this coordinates if this is the smallest triangle. Then it continues to loop
/* } */
This is probably not the most efficient way, but unless I find another way, this'll do the job.

How to make area of image clickable

This is not a: "Do all the work for me!" kind of question. I just wanna know which approach you think would be suitable for this challenge.
I have this map:
As you can see by the blue marker, I've roughly drawned some selections/areas of the map. Theese areas I want to serve as links.
But I don't quite know how to grasp this challenge, since all of the areas have quite odd shapes.
I have looked at cords, but it seems like a huge job with all of the twists and turns that I would need to do.
I would be awesome if I could just slice up the areas in Photoshop and save each of them as .png and just tell my page to ignore the transparent area! But that's just wishfull thinking I suppose.
I hope that one of you have a suggestion that I've overlooked.
Give a try to these -
http://polymaps.org/
http://www.amcharts.com/javascript-maps/
Raphael JS
You can try making an SVG version of your map and then implement it's clickiness with one of these libraries depending on which one you choose.
Here's one tutorial to do this with Raphael JS - http://parall.ax/blog/view/2985/tutorial-creating-an-interactive-svg-map
Make an image for each clickeable zone, like this:
Register to the click event of the img element from the page, this way:
var getAreaFromXY = function(x,y) {
// for each section colored map
// get pixel color on x,y (see http://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image)
// if the color is red, that is the zone
};
$(".post-text img").click(function(e) {
var area = getAreaFromXY(e.offsetX, e.offsetY);
});

javascript easelJs onPress enlarge image circle

Working with javascript and the Easeljs lib and createjs, i need some help.
my program draws some circles and fills them with color. also with a Ticker they are moving and with some if statements they are bouncing from the walls of the window.
The circles are created dynamicly and the amount of circles is different everytime.
Now I need to implement a feature so that the circles will enlarge when you press them. They should get their radius +1px bigger every 30 ms. I don't know how to do that.
1. Do u use onPress for this?which callbacks do i need to use and how will i find out if the mouse is released and the circle can stop growing?
2. do i need to delete circleObject from my circlesArray or is it enough to delete it from the stage and draw them again?
I'm desperate for help, i would be glad if someone could give me some clues!
Greetings T
With the information you provided I would refer you to take a look at this EaselJS Example on github: https://github.com/CreateJS/EaselJS/blob/master/examples/DragAndDrop_hitArea.html
The onPress-Method is used there in a way that you could probably almost copy as is.
Yours could look like this:
function(target){
target.onPress = function(evt) {
target.grow = true; //or a grow-factor or so
evt.onMouseUp = function(ev) {
target.grow = false;
}
}
}(circle);
and in your tick-function you look through all circles, check for their grow==true and increase their radius if so
And 2:
Your circleObjects all are a createjs.Shape right? You don't have to delete them from the stage or from the array, you can use circle.graphics.clear(); and then redraw the circle with the new radius.

Categories

Resources