Offline Geographical Maps in Web Application after

问题:

I have this very basic requirement for providing offline maps in my web application. My web-application cannot access internet and hence all online API's for showing map is ruled out completely.

After doing research,I downloaded the .osm.pbf format file for the desired location(Say a particular city). I

converted .osm.pbf to .osm file

Next step I generated tiles using this .osm file.

The tiles are stored on my local directory.

My final Step is to show these tiles as a map in web-browser inside my application (Java EE) and place a marker given the latitude and longitude of a place.

This is the only requirement I have to show inside the offline map.

I have the tile for a particular city.But I don't know how to use it and show offline map..

By the term offline I mean, the application is hosted on Intranet on application server and under no circumstances internet access is provided.

Kindly guide.

回答1:

First of all you need a mapping library that could be downloaded and reside inside your application. There are several but the most common ones are Leaflet and OpenLayers. Both support custom tile layers.

For example, assuming that your tiles are inside the web-application at a folder called "tiles", a possible layer definition would be (in Leaflet):

var map = L.map('map');
L.tileLayer('tiles/{z}/{x}/{y}.png').addTo(map);

or even in other machine in the intranet

var map = L.map('map');
L.tileLayer('http://intranetmachine/tiles/{z}/{x}/{y}.png').addTo(map);

回答2:

You're almost there.

Save the leaflet .js and .css files locally.

• http://leafletjs.com/dist/leaflet.css
• http://leafletjs.com/dist/leaflet.js

See the source code of this basic example: http://leafletjs.com/examples/quick-start-example.html

Change the .css, .js paths to your local copies, and the tileLayer path to local as described.

See the code for the marker:

L.marker([51.5, -0.09]).addTo(map)
            .bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

I'm guessing that's what you need. Remove the other polygons and the click-show-lat-long function if necessary.

If you want the map to be full-screen, change the <div.. tag to 100%.

<div id="map" style="width: 100%; height: 100%"></div>