You are not logged in.

#1 2008-02-19 17:12:11

t3e
Member
Registered: 2008-02-19
Posts: 2

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

Offline

#2 2008-02-19 17:45:01

Lambertus
Administrator
From: Apeldoorn (NL)
Registered: 2007-03-17
Posts: 3,269
Website

Re: Drawing Pins and Polylines on the map

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.


Mapping tools: Garmin GPSmap 60CSx, Giant Terrago 2002

Offline

#3 2008-02-20 08:32:10

emj
Member
From: .se (59.3N17.99E) 0735969076
Registered: 2006-06-18
Posts: 949

Re: Drawing Pins and Polylines on the map

So basically no, you can't do that on openstreetmap.org but if you set up your own site they you can do this. :-) 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.

Last edited by emj (2008-02-22 00:06:58)

Offline

#4 2008-02-20 11:14:28

t3e
Member
Registered: 2008-02-19
Posts: 2

Re: Drawing Pins and Polylines on the map

thanx a lot for the fast reply 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

Offline

#5 2008-02-22 00:31:13

emj
Member
From: .se (59.3N17.99E) 0735969076
Registered: 2006-06-18
Posts: 949

Re: Drawing Pins and Polylines on the map

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);

Offline

#6 2008-02-26 15:35:20

Harry Wood
Member
From: London UK
Registered: 2007-05-29
Posts: 147
Website

Re: Drawing Pins and Polylines on the map

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 :-(    dont know why.

Offline

Board footer

Powered by FluxBB