How can I generate a map like this using OSM? I want the map to highlight single country and fade others. Also, if the country is small I want to show it on the globe in a small thumbnail.
Oke let’s using JavaScript, because I think there is the biggest variety of libraries. Here I will explain a few approaches creating an interactive webmap.
1) The first approach is using plain svg:
You can download or draw with your vector software of choice the base map as svg. Then you could assign every country polygon a unique ID, and inside JS you can access the SVG with a mouseevent like click or mouseover. All the information of the country could be stored outside JS in a .json (easier) or .xml file. With the ID you getting from the SVG event you can get the fitting information from your .json. Maybe that reinvent the wheel, but it’s highly adjustable. But I think if you only want a static maps its simpler if you are using a more complex library.
2) The second approach is using a library for svg interaction:
The very popular D3.js or Raphael.js
3) The third approach is using a thematic webmapping library based on svg:
Use JQVMAP (former vectormap.js) or the very new austrian project mapmap.js
4) Use a topographic webmapping library
Here you can use the open libraries leaflet.js or openlayers.js. With these, the best approach will be, that you add your countries as a .geojson. Geojson is a very nice format that allows you interacting with your countries with the most geographical softwares.
5) Create und use your own tiles
This approach is the most performant solution but not the simplest to implement.
Here is a very nice tutorial explaining five approaches. But I think the simplest is using TileMill.
6) Using a mapserver
If you are not familiar with mapservers, this should only be considered when you are going to implement an extensive application. Nice Mapservers are Deegree and the popular Geoserver.
All of these approaches have their pros und cons but I think one of these solutions will fit your needs and I wish you the best successes!
You can use google Geo Chart. You can highlight any country you wanted.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geomap'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
For more info here is the link
https://developers.google.com/chart/interactive/docs/gallery/geomap?csw=1
Related
I'm working on an open mapping project and am trying to create a map that would enable website visitors to add markers to the map with some info input fields (markers would be visible by all after approved).
I discovered OpenLayers and Leaflet which both seem promising, and spent some time putting together basic maps, but after a lot of searching I've been unable to find anything on allowing visitors to add new markers to maps made with these two tools. Anyone know if this is possible ~~ or if there's another open source tool that would work better for this application? I'm solid in HTML//CSS and know basics of JQUERY - but am not well versed in javascript so if there are more plug-n-play tools thats preferred, but if not I'm willing to do the work to learn...
Thanks!
Yes you can, check out https://openlayers.org/en/latest/examples/draw-features.html to draw the feature(Point/Line/Polygon) on map vector layer
and then you can grab that feature and save it in database and reproduce it later depending upon your business logic.
You can save the drawing from the above example some what like this in javascript:
var features = source.getSource().getFeatures();
To get Point's coordinates :
var lonlat = features[0].getGeometry().getCoordinates();
var longitude = lonlat[0];
var latitude = lonlat[1];
But as ghybs said, you need to do back end work as well.
you need in LEAFLET but this solution is in NUXTjs add this to you code:
#dblclick to you event method and get new lat al lng points to store in database o do something:
<div id="map-wrap" style="height: 100vh">
<no-ssr>
<l-map :zoom="13" :center="[-16.5002, -68.1493]" #dblclick="newMarkerbyClient">
<l-tile-layer
url="https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png"
></l-tile-layer>
<l-marker :lat-lng="[xPosition, yPosition]"></l-marker>
</l-map>
</no-ssr>
</div>
and you script
data() {
return {
xPosition: -16.5002,
yPosition: -68.1493,
}
},
methods: {
newMarkerbyClient(e) {
console.log("x: " + e.latlng.lat + " y:" + e.latlng.lng);
this.xPosition = e.latlng.lat;
this.yPosition = e.latlng.lng;
//xPosition and yPosition are you new point provided by client and you can do anything with this
}
}
Regards from BOLIVIA
When creating Leaflet maps, I currently programmatically add my menus and legends by extending the L.Control like so:
var overlaysMenuCtrl = L.Control.extend({
onAdd: function(map){
var container = L.DomUtil.create('div', 'legend');
container.innerHTML = '<div id="mainMenu"><ul><li>blah</li></ul>';
return container;
}
});
The problem is that my custom menus are massive and I hate having to write the innerHTML code like that.
Is there a way to use some kind of template from another file and write the code there and then call the variable like so:
container.innerHTML = myMenuTemplate;
Then, the template could be like:
<div>
<ul>
<li>A list item</li>
<li>and so on...</li>
</ul>
</div>
The problem is that if I do the above method, I have to minify and remove line breaks/white space/etc in the code and makes it rather tedious everytime I make updates. Thanks for any tips!
I would suggest Mustache for javascript
The script is available on CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js" type="text/javascript"></script>
You can easily find some tutorials.
Here is an example with your data
EDIT:
Templates are useful to separate views and data.
If you don't really need templating but only an easy way to write your menus, you can just write them in invisible html elements that you access with
document.getElementById('menu1').innerHTML
I am generating line graphs of meteorological data using Dygraphs, and would like to implement a date range picker so that users can input a specific date or range of dates and see the data represented in said graph. I have scoured various websites and JSFiddle examples for other charting libraries which have not worked correctly (or in some cases at all).
Here is a Fiddle of my current graph. I have found the following code for creating the datepicker. Now I just need to implement it.
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
Can someone point me in the right direction? Many thanks.
i got a link http://thematicmapping.org/playground/zoomify/example.html
this link use some free plugin to load custom images by leaflet js
here small code
var map = L.map('photo').setView(new L.LatLng(0,0), 0);
L.tileLayer.zoomify('http://thematicmapping.org/playground/zoomify/books/', {
width: 5472,
height: 3648,
tolerance: 0.8,
attribution: 'Photo: Bjørn Sandvik'
}).addTo(map);
but i do not want to use any plugin. so just curious to know is it possible to load custom slice images with leaflet js. if yes then please drive to right article or code sample which help me to construct it.
thanks
Sorry this is a bit delayed, but you can do this by adding your own images into folders names by zoom level {z}. You can include them like this:
L.tileLayer('tiles/{z}/map_{x}_{y}.png', {
Here's a good description how to convert your image into the correct slices:
http://omarriott.com/aux/leaflet-js-non-geographical-imagery/
This is a continuation from a previous post regarding manipulation of SVG in a UIWebview. For more background info please see here first: UIWebview manipulating SVG 'on the fly'
Now I am trying to create SVG on the fly within the same frame work.
I have tried using the createElementNS method in Javascript without success.
Here is my failed attempt:
NSString *string = #"var svgDocument=document.getElementById('circle').getSVGDocument();var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'greencircle');shape.setAttributeNS(null, 'cx', 25);shape.setAttributeNS(null, 'cy', 25);shape.setAttributeNS(null, 'r', 20);shape.setAttributeNS(null, 'fill', 'green');svgDocument.appendChild(shape);";
[webView stringByEvaluatingJavaScriptFromString:string];
Could somebody please show me an example of how to create a simple circle with a similar approach as above. Or if there is a better way to create SVG graphics on the fly then I'd love to know!
Thanks.
You're actually pretty much there.
The second argument to createElementNS should be the type of element you're creating (circle) rather than an identifier (greencircle) e.g.
var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');
You can set an id with setAttributeNS instead.
shape.setAttributeNS(null, 'id', 'greencircle');
Also, append to svgDocument.documentElement rather than just svgDocument, otherwise you'll get an error:
svgDocument.documentElement.appendChild(shape);
As an aside if you aren't already the best way to quickly test all this stuff is in Chrome or Safari on your desktop with the developer tools turned on. Makes things much easier to debug.
So if you're working with the files mentioned in the earlier question about manipulating SVG you could prototype with:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG</title>
<script>
function make_circle() {
// test new Javascript code here before compacting it
var svgDocument=document.getElementById('circle').getSVGDocument();
var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');
shape.setAttributeNS(null, 'id', 'greencircle');
shape.setAttributeNS(null, 'cx', 25);
shape.setAttributeNS(null, 'cy', 25);
shape.setAttributeNS(null, 'r', 20);
shape.setAttributeNS(null, 'fill', 'green');
svgDocument.documentElement.appendChild(shape);
}
</script>
</head>
<body>
<!-- click on link to test the code -->
<a onclick='make_circle();'>Change color</a>
<object id="circle" data="circle.svg" width="250" height="250" type="image/svg+xml"/>
</body>
</html>
Obviously you can't test any of the touch events this way. :(
In terms of a better way as your Javascript gets more complex it might be worth working out how to keep everything in a separate .js file in your app bundle and then loading it into the webview by creating and inserting a dynamically created tag with stringByEvaluatingJavaScriptFromString.