Search code examples
openlayersopenstreetmapopenmaptiles

How to serve italian or english tiles map of Libia


I have Libian map but I would like show it not in original arabic alphabet but in italian or english characters, how can I do? Better if I can show all maps in only one language...

Here my code

<body  onload="init()">
<div id="map" id="map"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>

var map;
function init() {

// The overlay layer for our marker, with a simple diamond as symbol
var overlay = new OpenLayers.Layer.Vector('Overlay', {
    styleMap: new OpenLayers.StyleMap({
        externalGraphic: 'ico_soggiorno.png',
        graphicWidth: 20, graphicHeight: 20, graphicYOffset: -20,
        title: 'test'
    })
});

// The location of our marker and popup. We usually think in geographic
// coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
var myLocation = new OpenLayers.Geometry.Point( 13.1833326, 32.6833306 )
    .transform('EPSG:4326', 'EPSG:3857');

// We add the marker with a tooltip text to the overlay
overlay.addFeatures([
    new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
]);

// Finally we create the map
map = new OpenLayers.Map({
    div: "map", projection: "EPSG:3857",
    layers: [new OpenLayers.Layer.OSM(), overlay],
    center: myLocation.getBounds().getCenterLonLat(), zoom: 7
});

}


Solution

  • With the osmappa.it tiles it would look like this:

    <body  onload="init()">
    <div id="map" id="map"></div>
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
    
    var map;
    function init() {
    
    var osmappa = new TileLayer({
      source: new OSM({
        attributions: [
          'Tiles © <a href="https://www.osmappa.it/">osMap</a>',
          ATTRIBUTION
        ],
        url: 'https://osmap.{a-d}.tile.maphost.it/it/map/v1/{z}/{x}/{y}.png'
        //ask them first if you can use those tiles!
      })
    });
    
    // The overlay layer for our marker, with a simple diamond as symbol
    var overlay = new OpenLayers.Layer.Vector('Overlay', {
        styleMap: new OpenLayers.StyleMap({
            externalGraphic: 'ico_soggiorno.png',
            graphicWidth: 20, graphicHeight: 20, graphicYOffset: -20,
            title: 'test'
        })
    });
    
    // The location of our marker and popup. We usually think in geographic
    // coordinates ('EPSG:4326'), but the map is projected ('EPSG:3857').
    var myLocation = new OpenLayers.Geometry.Point( 13.1833326, 32.6833306 )
        .transform('EPSG:4326', 'EPSG:3857');
    
    // We add the marker with a tooltip text to the overlay
    overlay.addFeatures([
        new OpenLayers.Feature.Vector(myLocation, {tooltip: 'OpenLayers'})
    ]);
    
    // Finally we create the map
    map = new OpenLayers.Map({
        div: "map", projection: "EPSG:3857",
        layers: [osmappa, overlay],
        center: myLocation.getBounds().getCenterLonLat(), zoom: 7
    });
    

    This would be the variation of your code for using italian tiles. But please ask them first, maybe you'll need an apikey or the like because right now it does look as if those tiles only load for osmappa.it and not for other projects.