[PHP] Kaart van provincie, hot nieuws door iconen laten zien

[The.Terminator]

Ik zit hier al een poosje op te piekeren, maar heb geen idee hoe ik dit kan oplossen.

De bedoeling is nl, er word nieuws gepost op de site en dan kan er aangegeven worden of deze ook op de kaart zichtbaar moet worden gemaakt door middel van een vlammetjes icoon, politie icoontje en ambulance icoontje.
Dit nieuws staat dus in de database.
De plaatjes moeten per gemeente zichtbaar zijn (query van database is er al).
Kaart ziet er dan zo uit (dus zonder de andere gemeentes)

http://www.vrijwilligersa...es/layout/kaart/kaart.gif

Nu kun je met map en area (html) een bepaalt gedeelte aangeven (areas), werkt ook perfect, alleen daar is naar mijn idee geen mogelijkheid om een plaatje er in te zetten.

Dan kun je natuurlijk ook Google Api gebruiken en dan een plaatje op een google map te zetten (pointers met een custom plaatje).
Zou moeten werken, voorbeelden zat. Maarja dan heb ik ook de rest van de provincies erbij in de map (en de scheidingslijn in Google is niet zo goed zichtbaar).

Dus mijn vraag is er een mogelijkheid om punten aan te geven op een kaart doormiddel van HTML, Javascript etc.

Kheb al gezocht op google, maar krijg alleen hits voor het gebruik van Google Api en of maps / area ism HTML.

[RobIII]

Je kunt toch gewoon een absoluut gepositioneerd plaatje over de provincie zetten?

[TERW_DAN]

Je hebt de coordinaten van de plek van het nieuws nem ik aan. Deze kun je vertalen naar de positie op het scherm. Dan zou je toch door middel van positionering dmv top, bottom, left en right (evt vanuit CSS) kunnen regelen.
Je kunt dan per gebeurtenis een nieuw icoontje aanmaken (document.createElement) en hiermee een nieuw icoontje maken en vervolgens de style hiervan instellen zodat hij op de juiste plek komt.
Dat lijkt mij de makkelijkste manier eigenlijk.

[The.Terminator]

Hoe bedoel je ?

Kaart verandert nl per dag (dag 1 is bijv brand in Deventer, dag later is er een ongeval in Enschede).
De plaatjes op de kaart veranderen dan.

Of zou het mogelijk zijn divs te hebben (1 met de achtergrond en daarover de plaatjes in een andere div)
Waarvan de X en Y coordinaten zijn opgeslagen in de database per stad.

Edit

Coordinaten heb ik (nog) niet, maar ik kan natuurlijk die opzoeken van het plaatje met bijv Irfanview (X, Y).
Ik ga daar maar eens mee stoeien...

PS : iemand nog andere suggesties, altijd welkom.

[ Voor 23% gewijzigd door The.Terminator op 07-07-2009 17:19 ]

[RobIII]

The.Terminator schreef op dinsdag 07 juli 2009 @ 17:17:
Hoe bedoel je ?

Kaart verandert nl per dag (dag 1 is bijv brand in Deventer, dag later is er een ongeval in Enschede).
De plaatjes op de kaart veranderen dan.

Dus? Je kunt toch gewoon een style left/top zetten op elke image? Als je PHP/ASP/Whatever gebruikt kun je dynamisch die plaatjes genereren en op hun plek zetten.

The.Terminator schreef op dinsdag 07 juli 2009 @ 17:17:
Coordinaten heb ik (nog) niet, maar ik kan natuurlijk die opzoeken van het plaatje met bijv Irfanview (X, Y).
Ik ga daar maar eens mee stoeien...

PS : iemand nog andere suggesties, altijd welkom.

Je kunt ook met Flash aan de gang gaan, of Silverlight...of... er zijn denk ik wel 1001 manieren.

[TERW_DAN]

The.Terminator schreef op dinsdag 07 juli 2009 @ 17:17:
Hoe bedoel je ?

Kaart verandert nl per dag (dag 1 is bijv brand in Deventer, dag later is er een ongeval in Enschede).
De plaatjes op de kaart veranderen dan.

Of zou het mogelijk zijn divs te hebben (1 met de achtergrond en daarover de plaatjes in een andere div)
Waarvan de X en Y coordinaten zijn opgeslagen in de database per stad.

Edit

Coordinaten heb ik (nog) niet, maar ik kan natuurlijk die opzoeken van het plaatje met bijv Irfanview (X, Y).
Ik ga daar maar eens mee stoeien...

PS : iemand nog andere suggesties, altijd welkom.

coordinaten heb je sowieso nodig wil je iets positioneren, ongeacht op welke manier je het wilt doen. Je moet immers weten hoe iets komt te staan.

Maar wat RobIII ook al aangeeft, je kunt met een style.top en style.left alles positioneren zoals je wilt. Zet het plaatje in een div als achtergrond en in die div zet je de icoontjes die je positioneert. De plaatjes hoef je niet eens in een div te zetten, je kunt imageelementen zelf ook prima positioneren.

[RobIII]

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        div.map { background:url('http://www.vrijwilligersacademie.info/images/layout/kaart/kaart.gif') top left no-repeat; width:384px; height:341px; }
        div.icons { position: relative; }
        div.icons img { position : absolute; }
    </style>
</head>

<body>
    <p>Dit is een test</p>
    <div class="map">
        <div class="icons">
            <img src="http://www.iconarchive.com/icons/icons-land/transport/FireEscape-48x48.png" width="48" height="48" alt="Brandweer" style="top:20px;left:40px;">
            <img src="http://www.iconarchive.com/icons/icons-land/transport/FireEscape-48x48.png" width="48" height="48" alt="Brandweer" style="top:150px;left:220px;">
            <img src="http://www.iconarchive.com/icons/icons-land/transport/Ambulance-48x48.png" width="48" height="48" alt="Brandweer" style="top:100px;left:190px;">
            <img src="http://www.iconarchive.com/icons/icons-land/transport/Ambulance-48x48.png" width="48" height="48" alt="Ambulance" style="top:200px;left:290px;">
            <img src="http://www.iconarchive.com/icons/icons-land/transport/Police-48x48.png" width="48" height="48" alt="Politie" style="top:140px;left:120px;">
            <img src="http://www.iconarchive.com/icons/icons-land/transport/Police-48x48.png" width="48" height="48" alt="Politie" style="top:240px;left:180px;">
        </div>
    </div>
</body>
</html>

Voila. Peanuts

[ Voor 41% gewijzigd door RobIII op 07-07-2009 18:01 ]

[Liegebeest]

Netjes Roblll en inderdaad ook simpel te genereren met behulp van PHP iets dergelijks. Iets als het volgende (vast niet geheel foutloos, want snel gescribbled. De WHERE clausule kan zo gemaakt worden dat ie bijv de X meest recente items pak, of alleen de dingen van vandaag/gisteren/whatever.

code:

    <div class="map">
        <div class="icons">
        <?php
        $icoontjes = mysql_query("SELECT * FROM mapicons WHERE blablabla");
        while ($row = mysql_fetch_array($icoontjes))
        {
            switch ($type)
            {
                 case brandweer: $image="FireEscape-48x48.png";
                 case ambulance: $image="Ambulance-48x48.png";
                 case politie: $image="Politie-48x48.png";
            }
            echo "<img src=\"$imagelocation/$image\" width=\"48\" height=\"48\" alt=\"".$row[type]."\" style=\"top:".$row[topoffset]."px;left:".$row[leftoffset]."px;\">";
        }
        ?>
        </div>
    </div>

Om het netter aan te pakken is het beter om een extra tabel te maken met plaatsnamen en hun coordinaten tov je kaart. Die tabel kan je dan crossreferencen om de correcte offset te krijgen, zodat je dat niet steeds met de hand hoeft in te vullen.

[ Voor 11% gewijzigd door Liegebeest op 08-07-2009 08:25 ]

[Cascade]

Ik zou nog meer doen (meer voor de lol):
- de icoontjes verwerken in een CSS sprite (1 enkele background image met alle icons).
- icons klikbaar maken door er een a element van te maken, kan je ook meteen title gebruiken voor een omschrijving en linken naar meer info over de gebeurtenis.
- dan nog wel even info ophalen scheiden van de weergave, bij weergave heb je dan alleen een array van (pixel)coordinaten, de class, de omschrijving en een link per gebeurtenis nodig.

Zoiets:

HTML:

<style type="text/css">
    div#icons a {
        position: absolute;
        display: block;
        width: 48px;
        height: 48px;
        background-color: transparent;
        background-image: url('images/icons.png');
        background-repeat: no-repeat;
        background-position: top left;
    }
    div#icons a span  { display: none; }
    div#icons a.police  {   background-position: -48px 0px; }
    div#icons a.fire     {  background-position: -96px 0px; }
    div#icons a.medic   {   background-position: -144px 0px; }
</style>

<div id="icons">
    <a href="link-naar-event-1.html" title="Brand! Hengelo (OV), Alarmcode 3" class="fire" style="left: 30px; top: 50px;"><span>onzichtbare maar zoekbare info hier</span></a>
    <a href="link-naar-event-2.html" title="Boeven! Almelo, inbraak" class="police" style="left: 70px; top: 20px;"><span>onzichtbare maar zoekbare info hier</span></a>
</div>

[RobIII]

Cascade schreef op woensdag 08 juli 2009 @ 10:46:
Ik zou nog meer doen (meer voor de lol):
- de icoontjes verwerken in een CSS sprite (1 enkele background image met alle icons).
- icons klikbaar maken door er een a element van te maken, kan je ook meteen title gebruiken voor een omschrijving en linken naar meer info over de gebeurtenis.
- dan nog wel even info ophalen scheiden van de weergave, bij weergave heb je dan alleen een array van (pixel)coordinaten, de class, de omschrijving en een link per gebeurtenis nodig.

Zoiets:

Ja, d'uh. Maar dat lijkt me werk voor de TS. Niet iets wat we (nog verder) moeten voorkauwen.

[The.Terminator]

Thanks all voor de info.

Heb het werkend (was ook nie zo moeilijk, alleen mijn manier van denken soms )
Werkt nu via de database, super gewoon thanks!

[djluc]

Linkje wellicht?

[The.Terminator]

Dat mag ?

If yes, het staat nu nog test en word deze week live gezet
Maar dat moet een crew persoon maar even aangeven als het wel mag.

[RobIII]

Mwa; ik zie geen probleem in een directe link naar een pagina waarin je de oplossing demonstreert. Als we ons door registratieprocedures en/of 16 niveaus diep de site in moeten graven om je pagina te zien dan laat maar

[The.Terminator]

djluc schreef op woensdag 08 juli 2009 @ 11:47:
Linkje wellicht?

De map staat op http://www.overtwente.nl/nieuws/map/