I'm using Mapbox JS with Leaflet. I've been trying to find a way to rotate a polygon by dragging a corner or something similar, and I found Leaflet.Path.Transform that does exactly what I need, like this example (mainly the rotating and dragging part).
I looked at their example, and tried to use that for my particular situation. But I haven't been able to figure out how to access the script file required for that. Their GitHub page tells me to include the dist/L.Path.Transform.js file. So I went to this page and copied the code and pasted it in the script.js file in Plunker, and linked to it in the code. This is what I have so far in Plunker.
For now, I'm just trying to add a new polygon and try to rotate/drag that.
var polygon = new L.Polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
], {
color: '#f00',
transform: true
}).addTo(map);
//polygon.transform.enable({rotation: true, scaling: false});
But it is giving me some JavaScript errors. What am I doing wrong here? Or if there is some other simple demo that I can refer to, that'll be great as well.
Thanks to help from the person who developed Leaflet.Path.Transform (w8r), I was about to figure out what I needed. There is a sample demo in this link if anyone needs it. It is possible to rotate/drag the given polygon. In the original question, the issue was that I couldn't figure out how to link to the required script. But this is what I had missed first:
<script src='https://unpkg.com/leaflet-draw-drag#0.1.7/dist/Leaflet.draw.drag.js'></script>
<script src="https://unpkg.com/leaflet-path-transform#0.0.6/dist/L.Path.Transform.js"></script>
Now it works as I intended.
Related
I am currently developing a web-based application for visualizing data. The app is fed with a json file,formatted like this:
var theData = {
"nodes":{
"IBM":{
"type":"Institution",
"properties":{
"founded_in":"1998",
"director":"whoever"
}
},
"Joseph":{
"type":"Employee",
"properties":{
"Nationality":"bangladeshi"
}
},
[...]
},
"edges":{
"Joseph-IBM":{
"labeled":"Works at"
},
[...]
}
}
NOTE: The json is not entirely.
This data is loaded into the application and it will show you:
The nodes are draggables alongside the entire screen and both the lines and the label of the relationships are moved accordingly.
What would I like to?
I would like to make the surface in which the graph "lays" movable and zoomable, so the UX can be significantly improved. The way I have seen is
by using a canvas. The problem I find, is that the canvas is the first layer and the elements that are inserted in cannot be neither hovered nor clickable (to add events, for example). I do know that those are not really problems, since there is a graph vis that uses (canvas), but I do not know how to solve it.
I am not asking you to give me the exact code (if you want, it would be much appreciated :)), but to help me in finding something to achieve a movable and zoomable surface!
I hope that everthing is clear & Thank you in advance for any help you can provide.
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);
});
I'm working on a map that uses leaflet and is populated by data from a file in a GeoJson format. My overarching goal is to put graphs into the leaflet popups for each marker on the map.
Getting the markers for each feature and getting the popups to open was fairly easy. However, I am finding it difficult to use D3 to add to the popup.
For the sake of simplicity my goal at the moment is to use D3 to create a svg within each leaflet popup div and draw a square.
I have found some examples where people have used D3 to create graphs inside leaflet popups, but none of them were also using geoJson and the onEachFeature function. This is one of the examples:http://jsfiddle.net/6UJQ4/
Here is the relevant part of my code:
L.geoJson( data, {
style: function (feature) {
return { opacity: 0, fillOpacity: 0.5, fillColor: "#0f0" };
},
onEachFeature: function(feature, layer){
var graph_container = '<div class="popupGraph" id="graph" style="width: 200px; height:200px;"></div>';
layer.bindPopup(feature.properties.name + '<br>' + graph_container);
var svg = d3.select("#graph").selectAll("svg").append("svg").attr("width", 50).attr("height", 200);
var rectangle = svg.append("rect").attr("width", 25).attr("height", 25);
}
}).addTo(map);
I believe I am having issues because D3 can't find the graph_container div however I am a little stumped on how to fix this.
If anyone has any experience using D3, Leaflet, and geoJson together and could explain to me how to get my square to show in the popups or if anyone knows of a source that could help me. I would appreciate it a lot.
Thanks in advance!
UPDATE: Bits has solved my problem! If anyone needs a working example of using D3 in Leaflet popups in combination with GeoJson, Bits posted it in the comments but I will post it here aswell: http://jsfiddle.net/2XfVc/132/
Its quite simple, you just need to add and svg element inside of your div. And start coding d3.
Give me a moment, I am updating your fiddle.
Update: Here you go http://jsfiddle.net/6UJQ4/6/
I took the liberty of simplifying/stripping your example to lowest common denominator to reduce confusion.
Update: http://jsfiddle.net/6UJQ4/7/
In the previous fiddle, you will come across issues where all your markers will be selected everytime giving undesired results. So use last update.
my problem is related to the way how LatLngBounds.extend() method works. I am not sure if this is a bug or not but it does not work as intended. I expect bounds to contain all points included in it. Unfortunately it works really strangely in my case. Please check this fiddle: http://jsfiddle.net/Sy5dC/4/.
var locationBBOX = [
'(42.00, -142.00) (70.00, -50.00)', //CANADA
'(47.274719, 5.864166000000068) (55.053055, 15.038886999999932)',//GERMANY
//'(40.00, 27.00) (70.00, 179.00)'//RUSSIA
];
In lines 23-27 you will find definitions of bounding boxes for 3 countries. Currently Russia is commented out and everything works like a charm. The problem begins when Russia is included in bounds - the map does not show the correct bounding box. Is there anything I can do to make it work?
Thanks!
boundingBoxPoints does not encompass the same area as bbox does.
You may create the correct box for the bounds by using a Rectangle with the bounds-property set to bbox, and when you create Markers for all the points you will see that they are all located within this box.
Demo(the blue rectangle marks the real bounds): http://fiddle.jshell.net/doktormolle/EGDFH/show/
But I'm afraid that's not the desired result, unfortunately I have no solution at this time, also union() will not help here(it seems to be just a wrapper for extend(sw) & extend(ne) ).
I was reading this link but it is not the same
http://productforums.google.com/forum/#!category-topic/maps/base-map-data/M775Ry3-vNM
How can in google map makes circles and urls around cities?
See the following link
http://gmaps-samples-v3.googlecode.com/svn/trunk/circle-overlay/circle-overlay.html
Use new google.maps.Circle() constructor. You should set the centre and specify the radius of the circle. Hollow effect can be created using fillOpacity(0.0);
There is also a rectangle constructor new google.maps.Rectangle(). See https://developers.google.com/maps/documentation/javascript/reference#Rectangle
Use new google.maps.Circle() with a combination of listeners like mouseover and click.
There are display options like opacity and color.
https://developers.google.com/maps/documentation/javascript/reference#Circle
Your question is a bit too broad. If you have a more specific problem please edit it.