0

Not unlike others, I've found myself forced to edit some code due to MapQuest changing how they offer the openstreetmap data, and using an API Key.

Getting the key, aswell as getting up a simple leaflet map zoomed to where i wanted went easily.

Now I'm trying to add a layer of points of interest, based on a text file. I had/have the data in a file 'textfile.txt', and through OpenLayers I was able to display the markers using the following code snippet:

var pois = new OpenLayers.Layer.Text( "Archieflijst",
            { location:"./textfile.txt",
              projection: map.displayProjection
            });
map.addLayer(pois);

How would I make that work now?

For reference, i'll post current code-build, without my actual API-key:

<html>
    <head>
    <title>Werkterrein</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.5/leaflet.js"></script>
        <script src="https://www.mapquestapi.com/sdk/leaflet/v2.s/mq-map.js?key=key_goes_here"></script>
    <script src="ol.js"></script>
        <script type="text/javascript">

            window.onload = function() {
                var mapLayer = MQ.mapLayer(), map;

                map = L.map('map', {
                    layers: mapLayer,
                    center: [50.94517,3.11969],
                    zoom: 11
                });

                L.control.layers({
            'Map': mapLayer,
                    'Hybrid': MQ.hybridLayer(),
                    'Satellite': MQ.satelliteLayer(),
                    'Dark': MQ.darkLayer(),
                    'Light': MQ.lightLayer()
                }).addTo(map);

        var pois = new ol.Layer.Text( "Archieflijst",
                    { location:"./textfile.txt",
                    projection: map.displayProjection
                    });
        map.addLayer(pois);

           }





        </script>
    </head>

    <body style='border:0; margin: 0'>
        <div id='map' style='width:1100px; height:530px;'></div>
    </body>
</html>

I have 'textfile.txt' and 'ol.js' in the same folder.

Contents + example line for textfile.txt:

lat lon title   description icon    iconSize    iconOffset
51.0049363376102    3.19743523027068    Elk logo vertegenwoordigt een gerealiseerd project      icoon.png   16,16   -8,-8
Improve this question
5
  • Are you trying to migrate from OpenLayers to Leaflet? Your code seems to have classes from both. There is no class/plugin in Leaflet which corresponds to OpenLayers.Layer.Text, but it can easily be built. Can you post a couple of lines of the data in your textfile.txt, so that we can help you out with that.
    – Devdatta Tengshe
    Jul 18, 2016 at 9:40
  • 1
    I think you may have struck the key element of my confusion: mixing up Leaflet and OpenLayers. I had a working system in OpenLayers, but the tile support on which it relied got altered by MapQuest. I can access tiles, but it's a Leaflet plugin.. Basically I need to rebuild it in Leaflet rather then OpenLayers? And look into Leaflet's way of handling markers?
    – Tim Couwelier
    Jul 18, 2016 at 9:47
  • And the map (how it was, showing ugly error messages now, can be found here: demey.be/werkterrein ). Basically I want markers with 'icoon.jpg' - company logo to show up, and have it be able to build a display based on the contents of the 'description' field.
    – Tim Couwelier
    Jul 18, 2016 at 9:49
  • Is creating a CSV file a suitable solution for you? You could then use: github.com/joker-x/Leaflet.geoCSV
    – Devdatta Tengshe
    Jul 18, 2016 at 13:11
  • I'll be looking both into CSV, ShapeFile and GeoJSON. Basically, from an old acces-database, we've made a TAB-file we use in QGis, but also made the export from there to a txt file for use with OpenLayers.
    – Tim Couwelier
    Jul 18, 2016 at 13:20

1 Answer 1

Reset to default
2

You can use your existing text file, along with the Leaflet GeoCSV plugin, with the following code. Do note that I'm using jQuery to load the text file. Additionally, you can replace the OSM Layer with your MapQuest Layer.

<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<script src="leaflet.geocsv-src.js"></script>



<style>
#mapDiv{
    width:1200px;
    height: 700px;
}

.leaflet-popup-content-wrapper {
    color: #fff;
    background: black;
    background-image:url("openlayerbg.jpg");
    background-repeat:no-repeat;
    padding-left:30px;
}
.leaflet-popup-tip{
    background: black;
}
</style>

</HEAD>
<BODY>
<div id="mapDiv"> </div>

<script>
        $(document).ready(function() {

        var map = L.map('mapDiv').setView([50.94517,3.11969], 10);

        //Add osm Layer

        var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                minZoom : 8,
                maxZoom : 12,
                attribution : 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
            });
        osm.addTo(map);

        //load the text file
        $.get('textfile.txt', function(csvContents) {
            var geoLayer = L.geoCsv(csvContents, {
                  titles: ['lat', 'lon', 'title','description', 'icon'],
                  longitudeTitle: 'lon',
                  fieldSeparator: '\t',
                  lineSeparator: '\n',
                  deleteDobleQuotes: true,
                  firstLineTitles: true,
                  onEachFeature: function (feature, layer) {
                    layer.bindPopup(feature.properties['title']);
                  },
                  pointToLayer: function (feature, latlng) {
                        return L.marker(latlng, {
                          icon:L.icon({
                            iconUrl: feature.properties['icon'],
                            iconSize: [16,16]
                          })
                        });
                      }
                });
            map.addLayer(geoLayer);
          });
 });


    </script>

</BODY>
</HTML>
Improve this answer
8
  • Where do I insert that block? Before the </script> tag? And I'll assume I need to reference jQuery like this? : <script src="jquery-1.12.4.min.js"></script>
    – Tim Couwelier
    Jul 18, 2016 at 14:01
  • @TimCouwelier: I've added the complete Code
    – Devdatta Tengshe
    Jul 18, 2016 at 14:13
  • Map works, markers arent working yet. I'll try to figure out if it's a silly hickup on my end first (dependencies and what not), if that fails i'll upload my entire folder with the page +the entire text file that holds the markers. Many thanks for your efforts thus far.
    – Tim Couwelier
    Jul 18, 2016 at 15:21
  • is 'deleteDobleQuotes' intentional, or a typo? I notice you assign 'lon' for longitude, but not 'lat' for lattitude? For a limited time, the combined files I'm using are uploaded here: we.tl/A2A0KCMvhF , as that may yield more convenient troubleshooting.
    – Tim Couwelier
    Jul 18, 2016 at 15:48
  • deleteDobleQuotes is not required for your data, and you can remove it; I had to give only lon, because the default field for that in the library was lng. This problem does not exist for latitude; The only thing missing in your code, is that you need to place openlayerbg.jpg in the same folder. Then you will get the image in the popup.
    – Devdatta Tengshe
    Jul 19, 2016 at 2:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.