Er zijn 7 reacties in dit onderwerp

[BESLO]

Ik heb momenteel een website on-line staan waar ik mijn stamboom en naamstudie gegevens beschikbaar stel.
Om een en ander iets aantrekkelijker te maken zou ik graag een spreidingskaart genereren op basis van de gegevens die ik in mijn MySQL database heb staan.

Lang zoeken op het web geeft me echter niet wat ik wil (meestal geeft men als suggestie om een kaart te downloaden en deze dan manueel aan te passen). Ik wil dynamisch deze kaarten kunnen maken (immers de beschikbare gegevens worden nog regelmatig bijgewerkt).

Ik dacht in eerste instantie om dit in php te doen (kan ik dan aan de server kant doen).

Heeft er iemand enig idee waar ik meer info kan vinden?

[ingrid]

Wat versta je over een spreidingskaart? Een geografische kaart? In dat geval kan je googlemaps natuurlijk gebruiken...

[BESLO]

ingrid, op 25 March 2012 - 17:27, zei:

Wat versta je over een spreidingskaart? Een geografische kaart? In dat geval kan je googlemaps natuurlijk gebruiken...

Inderdaad een geografische spreidingskaart.

Maar zover ik kan zien kan je met bvb Google maps enkel vooraf kaarten maken en niet "on-the-fly", wat ik eigenlijk zou willen hebben.

Ik vrees dat het niet mogelijk is maar wou toch de vraag hier even stellen.

[RedThread]

Heb er ook even naar gezocht hoor, doch geen kant en klare oplossing te bieden... zoek nog even verder...

[RedThread]

ok, dit lijkt me wel iets...

Met onderstaande functie kun je een "dot" tekenen op een image.
maw, als je image een map van belgië is en je hebt een lijst met steden die je kunt omzetten naar een x,y positie dan je op die bepaalde plaats een dot markeren.

Hoe meer namen in één bepaalde lockatie, hoe groter de "dot" of eventueel in een andere kleur.
Vrees dat dit niet een "out of the box" oplossing is dus je zal even op je tanden moeten bijten,maar ik denk dat het doenbaar is.

Greetzzz


PHP Code:

<?php
function imagecircle($source,$r,$x,$y,$color){
  for($i = 0;$i<=2*pi();$i+=(pi()/180)){
	imageline($source,cos($i)*$r+$x,sin($i)*$r+$y,
cos($i+(pi()/180))*$r+$x,sin($i+(pi()/180))*$r+$y,$color);
  }
}
?>
Ex:
<?php
function imagecircle($source,$r,$x,$y,$color){
  for($i = 0;$i<=2*pi();$i+=(pi()/180)){
	imageline($source,cos($i)*$r+$x,sin($i)*$r+$y,
cos($i+(pi()/180))*$r+$x,sin($i+(pi()/180))*$r+$y,$color);
  }
}
$im_width = 200;
$im_height = 200;
$source = imagecreate($im_width,$im_height);
$w = imagecolorallocate($source,235 ,235,235);
$blue = imagecolorallocate($source,00,00,255);
imagecircle($source,50,50,50,$blue);
imagecircle($source,50,150,50,$blue);
imagecircle($source,50,50,150,$blue);
imagecircle($source,50,150,150,$blue);
header("Content-Type: image/png");
imagepng($source); 
?>

LINK :  http://php.net/manua...n.imageline.php

[BESLO]

Heb ondertussen ontdekt dat er een Google API bestaat welke toelaat om voor elk gegeven adres/stad/land etc de coördinaten op te vragen om deze daarna op een GoogleMap weer te geven.
Om een en ander iets te versnellen is het wel aan te raden om de coördinaten vooraf bij mekaar te zoeken in een eigen DB te zetten (het aantal API requests dat je gratis naar Google kan laten maken is beperkt).

Ik zal te zijner tijd (maw wanneer ik een volledig werkende php en javascript code heb deze op dit forum posten.
Topic is bij deze dus opgelost.

[RedThread]

BESLO, op 31 January 2013 - 11:21, zei:

Ik zal te zijner tijd (maw wanneer ik een volledig werkende php en javascript code heb deze op dit forum posten.
Topic is bij deze dus opgelost.

Mooi !! Je kan het misschien gelijk in de tutorials zetten (of wij doen dat wel voor jou)

thx !

[BESLO]

Het is me gelukt!!

Ik maak gebruik van de Google Maps API 3.0, Javascript en php.

Je moet er ook voor zorgen dat de webpagina HTML5 gecodeerd is!

Mijn DB table heeft volgende structuur:
Column Type
ID                   int(11)
Name             varchar(40)
Lat                 varchar(15)
Lng                varchar(15)

De coördinaten haal ik op via de volgende link (je kan hier een hoop adressen tegelijk opgeven):
http://www.mapdevelo...eocode_tool.php

Bij deze een voorbeeld code:
PHP Code:

<!DOCTYPE html>
<html>
<head>
	 <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	 <title>Google Maps test</title>
	 <script src="http://maps.google.c...s?sensor=false" type="text/javascript"></script>
</head>
<body>
	 <div id="map" style="width: 1000px; height: 600px;"></div>

	 <script type="text/javascript">
	 // De volgende informatie wordt uit een database gehaald dmv php
<?php
$Host = "localhost";
$User = "Jouw Paswoord";
$Password = "JouwPaswoord";
$DB = "JouwDB";

$Conn = mysqli_connect($Host, $User, $Password, $DB) or die ("Geen verbinding");
mysqli_set_charset($Conn,"utf8");

$Sql = "Select Name, Lat, Lng FROM Places ORDER BY Name";

$Result = mysqli_query($Conn, $Sql);

$NumRows = mysqli_num_rows($Result);

echo "var locations = [";
$Line = "";

for($i=0;$i<$NumRows;$i++){
$Row = mysqli_fetch_row($Result);
$Line .= '["' . $Row[0].'",'.$Row[1].",".$Row[2].',"'.$Row[0].'"],'; // 1) Zie informatie NA de code
}

$Line = substr($Line, 0, strlen($Line)-1);
echo $Line . "];";
?>
	 // Je moet vooraf een "centrum" locatie voor je map bepalen (maw waar op de wereldkaart wil je inzomen).
	 // Zoom = 0 =| Ganse wereldkaart
	 // Hoe hoger de zoom factor, hoe meer je zal inzoemen.
// In een later fase reset ik de zoom en center zodat alle markers op de kaart zichtbaar worden.

	 var map = new google.maps.Map(document.getElementById('map'), {
		 zoom: 8,
		 center: new google.maps.LatLng(51.2192159,4.4028818),
		 mapTypeId: google.maps.MapTypeId.TERRAIN
	 });

		 //	 mapTypeId: google.maps.MapTypeId.ROADMAP
		 //	 mapTypeId: google.maps.MapTypeId.SATELLITE
		 //	 mapTypeId: google.maps.MapTypeId.HYBRID
		 //	 mapTypeId: google.maps.MapTypeId.TERRAIN

	 var infowindow = new google.maps.InfoWindow();

	 var marker, i;

NumRows = locations.length;
	 for (i = 0; i < NumRows; i++) {
		 marker = new google.maps.Marker({
		 position: new google.maps.LatLng(locations[i][1], locations[i][2]),
		 map: map
		 });
	
		 google.maps.event.addListener(marker, 'click', (function(marker, i) {
		 return function() {
			 infowindow.setContent(locations[i][3]);
			 infowindow.open(map, marker);
		 }
		 })(marker, i));
	 }

var latlngbounds = new google.maps.LatLngBounds( );
for ( var i = 0; i < NumRows; i++ ) {
latlng= new google.maps.LatLng(locations[i][1],locations[i][2]);
latlngbounds.extend(latlng);
}
map.fitBounds(latlngbounds );
	 </script>
</body>
</html>

Opmerking 1
In deze voorbeeld code zet ik in het laatste element van mijn array even gewoon de zelfde info als die van element 0 (plaatsnaam). In de uiteindelijke applicatie zal hier andere informatie komen (genealogie website => geboorte, overlijden etc info).

LET OP 1!
Wanneer je de coördinaten via de bovenaan gegeven website wil kopiëren naar bvb Excel of Access om deze daarna naar MySQL te verplaatsen moet je ervoor zorgen dat de punt behouden blijft. Ik had hier enkele problemen mee toen ik even niet opgelet had. Excel had er totaal andere getallen van gemaakt.

LET OP 2!
Sommige coördinaten worden niet correct geïdentificeerd bvb Lillo (Antwerpen) wordt in Lille (nabij Herentals) geplaatst??!!

TODO:
Code welke bij het ingeven van een nog niet bekende plaatsnaam via Google maps (of andere) gaat zoeken naar de coördinaten en deze in de DB plaatst.