Drawing Pins and Polylines on the map

Hi,

is there a simple way to draw lines and pins on the map?
I want to show my last ride on the map.
Something like CustomLayers you can draw your stuff?

thanks a lot
best regards
Thomas Zeller

That depends on what you think is easy.

The OpenStreetMap maps are mostly served using OpenLayers (OL). If you look at the examples you’ll see many cool things to do with it.

In OL terms you want to add ‘polygons features’ to an layer.

So basically no, you can’t do that on openstreetmap.org but if you set up your own site they you can do this. :slight_smile: Actually I think you can write a Javascript that comunicate directly with the Openstreetmap API and put that on a OpenL ayers layer, but there is no code in the OSM project to do this…

Very cool idea though, considering how nice OL is becomming.

PS I don’t know what made me spell how as hove… DS.

thanx a lot for the fast reply :slight_smile:

I take a look at the ‘openlayer’ and i’ll play around with this.
If there are great steps i’ll inform you :wink:

Please do! If you get a good ajax script going then please tell me. I did do a place pins hack, but that was way to hacky to be useable too anyone else than me.

This is how I did it, but when I say it’s unuseable I really mean it. You don’t want to use this I don’t know anything about Ajax.:

http://tvs.se/~erik/affisch/

image-layer.html

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<title>Föreningsanslagstavlor i Stockholm</title>
    <style type="text/css">
        #textb {
                float:left;
                align:left;
                width:29%;}
        #map {
            float: right;
            width: 60%;
            height: 100%;
            border: 1px solid gray;
        }
    </style>
    <script src="lib/OpenLayers.js"></script>
    <script src="lib/mootools-release-1.11.js"></script>
    <script type="text/javascript">
        var map;
// Initera karta och klick funktioner, ladda in data
        function init(){
                var size = new OpenLayers.Size(10,17);
                var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
                var icon = new OpenLayers.Icon('AQUA.png',size,offset);
            map = new OpenLayers.Map('map');

            var options = {numZoomLevels: 3};
            var graphic = new OpenLayers.Layer.Image(
                                'Stockholm föreningstavlor',
                                'stockholm-affisch.jpg',
                                new OpenLayers.Bounds(-49, -35, 40, 35 ),
                                new OpenLayers.Size(891, 703),
                                options);
            var poi = new OpenLayers.Layer.Markers( "Markers" );
            map.addLayers([graphic,poi,]);
            map.zoomToMaxExtent();            
            map.events.register("click", map, function(e) { 
                var lonlat = map.getLonLatFromViewPortPx(e.xy);
                poi.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(lonlat.lon,lonlat.lat),icon.clone()));
                var jSonRequest = new Json.Remote("write.php", {onComplete: function(server_data){
//                      a=getElementbyID("list");
                        for(i=0;server_data[i]!=null;i++){
//                              alert(server_data[i].pid);
                        }
                }}).send({'lat': lonlat.lat, 'lon': lonlat.lon});

            });
            var jSonRequest = new Json.Remote("write.php", {onComplete: function(server_data){
                for(i=0;server_data[i]!=null;i++){
//                      alert("lon: "+server_data[i].lon + "lat: "+server_data[i].lat);

                        poi.addMarker(new OpenLayers.Marker(
                                new OpenLayers.LonLat(
                                        server_data[i].lon,server_data[i].lat),icon.clone()));
                }
            }}).send({'get_data':'yes'});


        }
    </script>
  </head>
  <body onload="init()">
    <h1>Föreningsaffichering dela upp arbetet</h1>
<div id="textb">
    <p>
Här är stockholms stads karta över förenings anslagstavlor där man gratis kan sätta upp affischer, denna site är till för att man ska kunna dela upp arbetet i en förening på ett lätt sätt.. Här kan man lätt klicka på ett affischeringsbart ställe och märka upp om det är affischerat, ska affischeras, eller inte alls finns någon affisch där.
    </p> </div>
<div id="map"> </div>


  </body>
</html>

write.php

<?php
 // create a new instance of Services_JSON
require_once('JSON.php');

$json = new Services_JSON(SERVICES_JSON_LOOSE_TYPE); // Get arrays instead of objects (this 
                                                     /// is bad should fix java script code instead

$input = $_POST["json"];

$clean=stripslashes($_POST["json"]);
$j = $json->decode($clean);

$link=mysql_connect("localhost","affischer","TEfhKdrEbBT4hNs.");
if (!$link) {
        die('Could not connect: ' . mysql_error());
}

if(!mysql_select_db("erik",$link)){
        print("Can't find the database on the server");
}
if($j["get_data"]=="yes"){
        $result=mysql_query("select lat,lon,pid,kommentar from affisch_geo limit 10;");
        if($result){
                $rows=array();
                print("[");
                if(mysql_num_rows($result)>0){
                        print($json->encode(mysql_fetch_assoc($result)));
                        while ($row = mysql_fetch_assoc($result)) {
                                print(",".$json->encode($row));
                        }
                }else{print ("NO match\n");}
                print("]");
         }else{
                print("No results". mysql_error());
         }
}else{
        $sql='INSERT INTO affisch_geo (pid,lat,lon) VALUES (-256,'.$j['lat'].','.$j['lon'].');';
        $result=mysql_query("$sql");

        if(!$result){
                die("No results <br>". mysql_error());
        }
        print("[]");

}


mysql_close($link);

ojw (a.k.a almien) used to have a tool running on his website called ‘Sketch’, which let you scribble on a map, and save the image at a fixed URL.

For example this URL usef to have planning map for the South West UK Mapping Party : http://almien.co.uk/Sketch/view.php?id=48

…as you can see it doesn’t seem to exist any more :frowning: dont know why.