I want to create a local map for my city where people can cover area with polygons and get their latitude and longitude
For Example there is a world map and someone come and he wanted to cover us then he can simply cover it and get its latitude and longitude of corners or borders
Is there any way or example i searched about it on google and Site both but didn't get Anything
Sorry I've no Codes i want idea, code or something helpful.
A simple search yielded http://www.the-di-lab.com/polygon/ and you can find a lot more samples at http://code.google.com/apis/maps/documentation/javascript/demogallery.html.
Unfortunately the above demo is a minified js. But the essential part of drawing a polygon (area) on google maps is to
1. load the map
2. trap the click events and the position (lat/lon)
3. draw lines
4. Finally when a double click is received, close the polygon
I unfortunately do not have a ready made sample in hand.
The answers here are quite outdated.
Google Maps now have a drawing library, This library allows the user to insert markers, circles, polygons and other types as well.
You can find an example on it here. And the library reference here.
And the documentation here.
It seems there is a simpler solution now. From the same demo gallery link that Muthu shared earlier look for user editable shapes. Below is a sample code from this link that draws a rectangle and allows user to edit the shape further
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 44.5452, lng: -78.5389},
zoom: 9
});
var bounds = {
north: 44.599,
south: 44.490,
east: -78.443,
west: -78.649
};
// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
bounds: bounds,
editable: true
});
rectangle.setMap(map);
}
Also here is an example on jsfiddle that extends above to generalized polygon and below is the code from the link
var editablePolygon = new google.maps.Polygon({
paths: coords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
editable: true });
Attached is a screenshot (after dragging one midpoint node in the triangle)
I think you need to use GeoChart
https://developers.google.com/chart/interactive/docs/gallery/geochart?csw=1. It can cover certain regions or areas
Related
I am trying to do a confirmation screen on my react native app and I need the user to trace an ellipse in order to confirm their action - kinda like what hotel tonight does with their logo. Is there a library I can use to have the user trace over an svg?
Here is an example of what the user would be doing:
I found someone else trying to do this, I don't think that is the most creative approach, there was a way to do this in flash many years ago.
I know that SVG is being used for line art animation there are many tutorials out there:
https://medium.com/#sterling.meghan/svg-line-animation-for-beginners-51857c88357f
Also, there is a library for SVG called react-native-svg, the thing is SVG objects can be dragged in javascript
http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/
So my idea to solve this would be this:
You have two layers one on top of each other.
The top one fills the entire screen and has a cut, that is the shape to be traced (the line art)
To get to the SVG object that is behind you can only do it through this cut. You can show a small circle on the starting point that is part of a big SVG colored shape that is under the cut, this shape is the second layer.
The user would start tracing but what he really is doing is dragging that SVG big object from one point to the next, he needs to follow the path like tracing because only if he does this he can drag the object through the hole. (He can only reach the object in the second layer through the hole)
The SVG object being drag has a different color from the top layer so when the user drags it gives the appearance of the path filling up.
I hope this helps you or at least gives you some ideas. Also, you could animate another SVG when the user completes the trace, with CSS line art animation. I would probably try this when I have the time.
I came across a similar situation in which I ended up using react-native-sketch-canvas
I made the user draw on the canvas & compared the output path with a predefined path. It was not a perfect solution but was good enough for my requirements.
For recognition you can use rn-gesture-recognizer built off of the rn-draw package :
https://www.npmjs.com/package/rn-gesture-recognizer
(https://www.npmjs.com/package/rn-draw)
And then you can for example create your perfect css shape over your svg :
https://codedaily.io/tutorials/22/The-Shapes-of-React-Native
Also, you can do other things like that :
https://codedaily.io/tutorials/55/Create-a-Draggable-Opacity-Changing-Circle-with-Reanimated-in-React-Native
Generally when we talk about working on SVG's the first library that comes to my mind is the D3 Js , in d3 you can follow the path of any shape in the svg and we can create interpolation , One such example is stated below , See through if this can help you in any ways.
<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
<div id="loader_container"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
function loader(config) {
return function() {
var radius = Math.min(config.width, config.height) / 2;
var tau = 2 * Math.PI;
var arc = d3.svg.arc()
.innerRadius(radius*0.5)
.outerRadius(radius*0.9)
.startAngle(0);
var svg = d3.select(config.container).append("svg")
.attr("id", config.id)
.attr("width", config.width)
.attr("height", config.height)
.append("g")
.attr("transform", "translate(" + config.width / 2 + "," + config.height / 2 + ")")
var background = svg.append("path")
.datum({endAngle: 0.33*tau})
.style("fill", "#4D4D4D")
.attr("d", arc)
.call(spin, 1500)
function spin(selection, duration) {
selection.transition()
.ease("linear")
.duration(duration)
.attrTween("transform", function() {
return d3.interpolateString("rotate(0)", "rotate(360)");
});
setTimeout(function() { spin(selection, duration); }, duration);
}
function transitionFunction(path) {
path.transition()
.duration(7500)
.attrTween("stroke-dasharray", tweenDash)
.each("end", function() { d3.select(this).call(transition); });
}
};
}
var myLoader = loader({width: 960, height: 500, container: "#loader_container", id: "loader"});
myLoader();
</script>
</body>
</html>
Source :
http://bl.ocks.org/MattWoelk/6132258
You can tweak the interpolation with any types , String , date anything. For Interpolation the below link can help
https://bl.ocks.org/mbostock/3173784
http://jsfiddle.net/SHF2M/
https://codepen.io/frcodecamp/pen/wxXypx
Build the outer svg shape as two ellipses connected by line on either sides , then we can use the ellipse path to interpolate using rotate positions , The rotate position should depend on the progress in confirmation screen.
The polyline is drawn showing below building.
(source: gifyu.com)
How can I get the polyline top of all layers
please suggest
adding polyline as
var coordinates = locationsArrToAdd.map({ (location: CLLocation!) -> CLLocationCoordinate2D in
return location.coordinate
})
let polyline = MKPolyline(coordinates: &coordinates, count: locationsArrToAdd.count)
self.mapView.addOverlays([polyline], level: .aboveLabels)
According to Apple, the highest available level you can add an overlay to is the MKOverlayLevel.aboveOverlays constant you are currently using. However, their documentation states that this will:
Place the overlay above map labels, shields, or point-of-interest icons but below annotations and 3D projections of buildings.
From what I can see, the best solution is to disabled buildings in 3D mode, so that your polylines are visible:
self.mapView.showsBuildings = false
I'm building a dynamic graph with cytoscape.js over a world map generated with jVectorMap.
Starting with coordinates in LAT / LON format from json data, I can convert them in point.x / point.y over the generated map with:
var nodePoint = theMap.latLngToPoint(node.data.lat, node.data.lon)
and then I can add the new node in the graph with:
cy.add({
group: "nodes",
position: { x: nodePoint.x, y: nodePoint.y },
style: {
'background-color': node.color
},
data: {
id: node.id,
name: node.label,
customData: node.data,
}
})
This part works, but when json returns multiple nodes with the same coordinates, I would like to spread these nodes around the point with the common LAT / LON information.
I'm able to identify these nodes and apply a dedicated layout to them, but the resulting layount is located in the center of the screen / div of graph.
What I want to know is if there is a simple way to apply a Circle Layout with specific center point.
(I would like to avoid implementing the solution that I'm evaluating... i.e to build a bounding box around the center point and see what happens, (with the bounding box size that grows along with node number in the same point))
In the Wine and cheese example included in the documentation they use the bounding box to force a concentric layout around a selected node ( http://js.cytoscape.org/demos/cde4db55e581d10405f5/ ).
While you indicate you would like to avoid this solution it seems a straightforward solution. The implementation in the example is rather elegant.
Created a graph using cytoscape.js. Need to add image as a label on edge.
After examination of
CanvasRenderer.drawElements in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-redraw.js#L406-L412
CanvasRenderer.drawEdgeText in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-label-text.js#L6-L31
CanvasRenderer.drawEdge in https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/src/extensions/renderer.canvas.drawing-edges.js
it seems that image label on edge is not supported right now.
One candidate where this feature might be added seems to be the CanvasRenderer.drawEdgeText function. The implementation might examine the text contained in the edge's content and if it looks like reference to an image (e.g. url) then draw it as image...
https://github.com/cytoscape/cytoscape.js/blob/v2.3.8/README.md
Contributing to Cytoscape.js
Cytoscape.js is an open source project, and anyone interested is encouraged to contribute to Cytoscape.js. We gladly accept pull requests. If you are interested in regular contributions to Cytoscape.js, then we can arrange granting you permission to the repository by contacting us.
If your pull request is a bugfix, please make changes to the master branch. Otherwise, please make changes to the next version's branch (i.e. unstable).
I know this is a late answer. but this will help somebody who looks for an answer as like me.
We can use icon fonts or fontawesome for this.
set the edges data as
edges = {
data:
id: "3f5cb5c4-43aa-4f4d-b816-fb4f279585c7"
label: "1 A \uf023 \uf022" //this is the fontawesome unicode chars for lock and notes icons
source: "1"
sourceName: "shipping"
target: "4"
targetName: "twilio.com"
value: 2
}
next in your cytoscape style, mention the font as fontawesome
{
selector: '.autorotate',
style: {
'edge-text-rotation': 'autorotate',
'font-size': '8px',
// 'color': '#000000',
'color': '#333333',
'font-family': 'FontAwesome, helvetica neue Cantarell',
'text-margin-x':'5px',
'text-margin-y':'5px',
// 'source-text-margin-x':'5px',
// 'source-text-margin-y':'5px'
}
}
Now your cytoscape graph will show edges with images as like this
In order to have markers that are clickable and marker shadows that are not, I'm setting up two geoxml3 parsers, one for the markers and one for the shadows. That works, but I'm hoping that having two layers will also let me keep the shadow of one marker from falling on another marker. It's a subtle thing, but having a visually horizontal shadow overlaid on a visually vertical marker undercuts the 3-D effect. And in a cluster of markers, things get pretty murky down among the marker stems.
Now, I get that icons are rendered from north to south, so that an icon will peek over the top of an overlapping icon to the south of it. What I was expecting was that each parser would create its own layer, in the sense that a marker layer would appear entirely in front of a preceding shadow layer, with no shadow falling on any marker. It sure looks, though, like the parsers are working north to south down both "layers" at the same time. It seems like for each point they render the shadow image and then the corresponding marker image before moving down to the next point. If the next marker is pretty close to the southwest of the previous marker, its shadow image falls onto that previous marker.
To make sure I wasn't seeing some sort of illusion, as an exercise I put together a map with a couple of big, overlapping shadowed markers. What I'd hope for would be to have the images layered, bottom to top:
East Greenland Shadow
Greenland Shadow
East Greenland Marker
Greenland Marker
Instead, they appear to be layered:
East Greenland Shadow
East Greenland Marker
Greenland Shadow
Greenland Marker
with the Greenland Shadow falling on the East Greenland Marker.
So, can I get all of the markers to appear, collectively, in front of all the shadows? I can't track it down at the moment, but I believe I saw a list of standard Google Maps layers somewhere, which included something like a non-clickable "Shadow Layer". When I create a google.maps.KmlLayer with standard icons, the API automatically pulls up the corresponding shadow images and places those on what I guess is the Shadow Layer, which sits entirely behind the KmlLayer I asked for.
In my current project, I need a geoxml3 marker layer, so I can programatically access the placemarks. Since I can actually work with 32x32 icons, in this case I can just fall back to using a KmlLayer for the shadows, but for future reference it would be great to have the option of a non-clickable geoxml3 layer that sits entirely behind a clickable layer. Is there a way to do that? Would that be a matter of somehow rendering onto that Google Maps Shadow Layer?
Here's the script:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(71, -45),
zoom: 4,
preserveViewport: true
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// Shadow Layer
var shadow = new geoXML3.parser({
map: map,
zoom: false,
markerOptions: {clickable: false}
});
shadow.parse('greenland_shadow_5.kml');
// Marker Layer
var blues = new geoXML3.parser({
map: map,
singleInfoWindow: true,
zoom: false,
suppressDirections: true,
markerOptions: {
shape: {
type: 'circle',
coords: [38,38,38]
}
}
});
blues.parse('greenland_5.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
The two KML files are identical except for the IconStyles:
<IconStyle>
<Icon>
<href>bluemarker_76x128.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="38" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>
versus:
<IconStyle>
<Icon>
<href>markershadow_188x128.png</href>
<scale>1.0</scale>
</Icon>
<hotSpot x="96" y="0" xunits="pixels" yunits="pixels" />
</IconStyle>
You could take the "MarkerShadow" class and use it to make a layer of just shadows. and make a layer with just markers: proof of concept
- disadvantage: processes the same KML twice.
I can think of 4 options for you:
Put your shadows in a separate KML file and display them using the native google.maps.KmlLayer, that should put them underneath all the google.maps.Marker objects, which is what geoxml3 uses to render the icons. The issue with KmlLayer is that it does not support scaling, all icons are scaled to 64x64 and if they can't be, they are replaced by the default blue icon. KmlLayer is rendered in the overlayLayer pane.
create custom "markers" using Custom Overlays that support combining a marker image with a shadow image. Used to be supported natively by the Google Maps Javascript API v3, but they removed that functionality with the "visual refresh". It looks like the "shadowPane" still exists (at least for now), you could put all the shadows there.
overlayShadow contains the marker shadows. It may not receive DOM events. (Pane 2).
mapPanes reference
Use the zIndex option of the google.maps.Marker object to put the shadows below the markers. Put all the shadows at zIndex = 0 (so they are on the bottom, then use an algorithm to put the markers in their default orientations:
zIndex: Math.round(latlng.lat()*-100000)<<5
"manually" add a shadow to the markers in a custom "createMarker" function (append the shadow image to the shadowPane)
proof of concept marker with shadow