Fórum Root.cz

Hlavní témata => Vývoj => Téma založeno: registrovany123 22. 05. 2021, 09:36:59

Název: Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: registrovany123 22. 05. 2021, 09:36:59
Zdravim,

vim jak vlozit do webovky mapku s odkazem na nejakou adresu. Ja byc ale spise chtel udelat neco jako je toto:

https://www.heimstaden.cz/cz/pronajem-byty/

Tzn. jedna se o vlozeni mapy, do ktere by se v ramci te webove apkikace daly pridavavat ruzne zajimave body.

Vim ze neco takove jde s Google maps, ale ja bych preferoval Mapy.cz.

Navic, nevite jak je to s licencemi, pokud nekdo chce ty mapy pouzivat za timto ucelem?
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: ByCzech 22. 05. 2021, 09:54:44
Vše je zde: http://api.mapy.cz/
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: Filip Jirsák 22. 05. 2021, 13:27:14
Otevřete si mapy.cz (https://mapy.cz), nastavte si mapu tak, aby zobrazovala, co potřebujete, klikněte vpravo dole na NástrojeSdílet tuto mapu → záložka Vložit mapu do vlastních stránek a dále postupujte podle návodu.

Pokud chcete s mapou pracovat víc, jděte na http://api.mapy.cz.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: mhi 22. 05. 2021, 13:56:22
Tady je skript, ktery staci strcit za zakladni example vlozeni mapy, znacky bere z javascriptoveho zdroje (upraveny json). Kdybyste nekdo vedel jak delat snadno ruznobarevne znacky, uvitam to ;-). Cele je to quick hack jak nasypat nejaka data do mapy z lokalniho html/js.

Kód: [Vybrat]
stolystr = '[\n'+  '{  "objectid": 28940,  "id_dd": 32412,  "id_sdd": 3040,  "cislo_oznameni": "2814",  "nazev_dila": "propad Chabařovice (p.č. 235/1)",  "kategorie_dila": "Opuštěné důlní dílo",  "druh_dila": "Propad",  "profil_dila": "Kruhový",  "rozmery_usti": "3",  "hloubka_delka_dila": 3,  "ukonceni_provozu": "před r. 1945",  "oznameno_rok": 2021,  "surovina": "Uhlí hnědé",  "spravce": "Palivový kombinát Ústí, státní podnik IČ: 00007536",  "y_sour": 766888,  "x_sour": 974155,  "z_sour": null,  "katastr_nazev": "Chabařovice",  "katastr_cislo": 650498,  "okres_nazev": "Ústí nad Labem",  "kraj_nazev": "Ústecký kraj",  "mapa_zm50": "0232",  "cis_podd_uzemi": 1866,  "sidlo_obu": "Most",  "signatury": null,  "datum_zmen": 1614084120000},\n'+
'{  "objectid": 28958,  "id_dd": 32413,  "id_sdd": 3043,  "cislo_oznameni": "2813",  "nazev_dila": "propad Tušť (p.č. 1568)",  "kategorie_dila": "Staré důlní dílo",  "druh_dila": "Propad",  "profil_dila": "Kruhový",  "rozmery_usti": "2",  "hloubka_delka_dila": 0.8,  "ukonceni_provozu": "do 19. století",  "oznameno_rok": 2021,  "surovina": "Železné rudy",  "spravce": "Neexistuje",  "y_sour": 725298,  "x_sour": 1178198,  "z_sour": null,  "katastr_nazev": "Tušť",  "katastr_cislo": 771937,  "okres_nazev": "Jindřichův Hradec",  "kraj_nazev": "Jihočeský kraj",  "mapa_zm50": "3311",  "cis_podd_uzemi": null,  "sidlo_obu": "Plzeň",  "signatury": null,  "datum_zmen": 1614715080000},\n'+
'{  "objectid": 28960,  "id_dd": 32471,  "id_sdd": 3051,  "cislo_oznameni": "2822",  "nazev_dila": "propad Božičany X",  "kategorie_dila": "Staré důlní dílo",  "druh_dila": "Propad",  "profil_dila": "Kruhový",  "rozmery_usti": "4",  "hloubka_delka_dila": 2.5,  "ukonceni_provozu": null,  "oznameno_rok": 2021,  "surovina": "Uhlí hnědé",  "spravce": "Neexistuje",  "y_sour": 856452,  "x_sour": 1006695,  "z_sour": null,  "katastr_nazev": "Božičany",  "katastr_cislo": 608939,  "okres_nazev": "Karlovy Vary",  "kraj_nazev": "Karlovarský kraj",  "mapa_zm50": "1121",  "cis_podd_uzemi": 441,  "sidlo_obu": "Sokolov",  "signatury": null,  "datum_zmen": 1615808280000},\n'+
'{  "objectid": 28977,  "id_dd": 30271,  "id_sdd": 3031,  "cislo_oznameni": "2803",  "nazev_dila": "Jáma František",  "kategorie_dila": "Staré důlní dílo",  "druh_dila": "Jáma",  "profil_dila": "Obdélníkový",  "rozmery_usti": "3x2",  "hloubka_delka_dila": 30,  "ukonceni_provozu": "před i po 1945",  "oznameno_rok": 2020,  "surovina": "Uhlí černé",  "spravce": "Neexistuje",  "y_sour": 789936.44,  "x_sour": 1035082.55,  "z_sour": 340.52,  "katastr_nazev": "Rakovník",  "katastr_cislo": 739081,  "okres_nazev": "Rakovník",  "kraj_nazev": "Středočeský kraj",  "mapa_zm50": "1214",  "cis_podd_uzemi": 1416,  "sidlo_obu": "Praha",  "signatury": "GF P141528",  "datum_zmen": 1606925160000}\n'+
']';

var stoly = JSON.parse(stolystr);


// dulni dila
var layer2 = new SMap.Layer.Marker();
m.addLayer(layer2);

for (var i=0;i<stoly.length;i++) {
 var coord = SMap.Coords.fromJTSK(stoly[i].x_sour,stoly[i].y_sour); // toto bere souradnice z krovaka, nutno opravit nejspis na WGS84
 var options = {};
 options.title=stoly[i].nazev_dila+"\n"+"ID DD: "+stoly[i].id_dd ;
var card = new SMap.Card();
card.getHeader().innerHTML = "<strong>"+stoly[i].nazev_dila+"</strong>";
card.getBody().innerHTML = stoly[i].druh_dila+
   (stoly[i].profil_dila != null ? ", profil "+stoly[i].profil_dila+" ":"")+
   (stoly[i].hloubka_delka_dila!= null ? " (hloubka/delka "+stoly[i].hloubka_delka_dila+") ":"")+ " (ukončeno "+stoly[i].ukonceni_provozu+")";
 
 var marker = new SMap.Marker(coord, "myMarker"+i, options);
 marker.decorate(SMap.Marker.Feature.Card, card);
 layer2.addMarker(marker);
 }

layer2.enable();
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: _Jenda 22. 05. 2021, 15:29:07
Kromě již zmíněného api.mapy.cz lze mapy.cz načíst v Leafletu, což je víc rozšířené a standardizované řešení. Nicméně nevím, jestli je to licenčně OK (minimálně zařiď, aby to vypadalo stejně, tj. dole se ukazovalo logo a copyright). Pak ještě existuje placená verze mapy.cz, ale o té nic nevím (např. kolik to bude stát a tak).
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: Filip Jirsák 22. 05. 2021, 16:11:45
Kromě již zmíněného api.mapy.cz lze mapy.cz načíst v Leafletu, což je víc rozšířené a standardizované řešení. Nicméně nevím, jestli je to licenčně OK (minimálně zařiď, aby to vypadalo stejně, tj. dole se ukazovalo logo a copyright). Pak ještě existuje placená verze mapy.cz, ale o té nic nevím (např. kolik to bude stát a tak).
Zda je to licenčně OK už se několikrát probíralo na různých fórech a nikdy se nedospělo k jednoznačné odpovědi. Ptal jsem se na to i na Twitteru přímo účtu mapy.cz, ale odpověď jsem nedostal. Každopádně když se tam přidá logo tak, jak vyžadují Mapy.cz, je dost nepravděpodobné, že by to někoho trklo, že to vlastně nepoužívá jejich JS knihovnu. Osobně mám trochu podezření, že je to s tou licencí nejasné záměrně – že použití s jiným API tolerují, ale kdyby to chtěl někdo zneužívat, vytáhnou na něj tu nejasnou licenci.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: registrovany123 22. 05. 2021, 16:48:24
A jak je to teda s licenci pro komerční užívání? Já si tomcetl, ale čert aby si v tom byl jistý jak to je. Mojí cílem je vyrobit web který slouží jako mapa pro recenze realit. Komerční využití v budoucnu nemůžu vyloučit.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: Filip Jirsák 22. 05. 2021, 17:09:38
Mapy.cz můžete použít i pro komerční použití. Nesmí být ale použité na stránce, která je schovaná za přihlášením (pak by bylo nutné se domluvit na té placené licenci). Tj. může to být pouze na stránkách, které jsou veřejně přístupné pro kohokoli.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: registrovany123 22. 05. 2021, 21:29:58
To API co to ma Seznam neni tak spatne, uz mi to fachci, pred par lety jsem zkousel Google Maps API a to mi tak dobre neprislo.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: _Jenda 23. 05. 2021, 01:37:12
A jak je to teda s licenci pro komerční užívání? Já si tomcetl
Doslova první věta na té stránce je Použití Mapy API je zcela zdarma a je možné i pro komerční účely.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: registrovany123 23. 05. 2021, 08:20:34
A jak je to teda s licenci pro komerční užívání? Já si tomcetl
Doslova první věta na té stránce je Použití Mapy API je zcela zdarma a je možné i pro komerční účely.

Jo, ale komercni pouziti jakeho typu. Je rozdil pokud pouziju Mapy.cz do komercni stranky do sekce Kontakty. A je rozdil jestli vyrobim stranky www.lepsi-nez-mapy.cz a budu vyrabet komercni mapu s necim. Nebo pokud vyrobim mobilni app s GPS Navigaci a budu k tomu pouziva Mapy.cz.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: Filip Jirsák 23. 05. 2021, 09:55:03
Jo, ale komercni pouziti jakeho typu. Je rozdil pokud pouziju Mapy.cz do komercni stranky do sekce Kontakty. A je rozdil jestli vyrobim stranky www.lepsi-nez-mapy.cz a budu vyrabet komercni mapu s necim. Nebo pokud vyrobim mobilni app s GPS Navigaci a budu k tomu pouziva Mapy.cz.
Nepsal jste nic o tom, že chcete vyrábět mapovou aplikaci.

Nevím, co ještě chcete slyšet. Na https://api.mapy.cz máte plnou verzi podmínek, ode mne jste dostal verzi zkrácenou na tři věty, od _Jendy verzi zkrácenou do jedné věty.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: registrovany123 26. 05. 2021, 22:35:09
No tak Mapy.cz jsem asi trochu prechvalil, chtel jsem si z inch udelat Vue.js komponentu, a prestaly v inch správce fungovat eventy. Takze asi zase skoncim u google maps, ktere uz vue komponentu maji.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: Filip Jirsák 27. 05. 2021, 09:34:29
Nemyslím si, že by to byla chyba Mapy.cz…

Pozor na to, že Google Maps před pár lety výrazně snížily limity na počet zobrazení zdarma. Jakmile budete mít jenom trošku navštěvovanější web, budete za ně muset platit.
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: mhi 27. 05. 2021, 14:48:08
Trochu jsem si hral s https://leafletjs.com/ - nasypal jsem tam grasne Google i Mapy.cz + nejake dalsi jako pokus, to slo snadno. Pak jsem zjistil, ze http://sgi.nahlizenidokn.cuzk.cz/marushka/default.aspx?themeid=3 je taky Leaflet.js, celkem mne prekvapila ta obfuskace na jejich strance ;-). Kazdopadne mate nekdo funkcni WMS server CUZK v Leafletu ? Moc to nepotrebuju, bylo by ale prima mit jejich ortofoto + katastr jako alternativni zobrazeni. Jenze to WMS neznam a moc se mi to nechce studovat, treba mate nekdo nejaky priklad ?

To same https://app.iprpraha.cz/apl/app/ortofoto-archiv/ , jpeg tiles jdou normalne stahnout, ale nevim v jake jsou transformaci, jaky souradnicovy system pouzivaji (ani jsem to moc zatim nestudoval).
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: luvar 28. 05. 2021, 13:20:17
Mozno sa niekomu hodi aj viacmenej Slovensky freemap...

Nejaky "wizard" pre generovanie embedovacieho kodu:
https://www.freemap.sk/?map=8/48.707140/19.499500&layers=X&show=embed

Mozny vysledok:
Kód: [Vybrat]
<iframe src="https://www.freemap.sk/?map=8/48.707140/19.499500&layers=X&embed=search" style="width: 640px; height: 480px; border: 0" allowfullscreen></iframe>
Název: Re:Jak do webovky zabudovat mapy.cz nebo google maps?
Přispěvatel: registrovany123 28. 05. 2021, 13:36:17
Hledte google maps s Vue, nemusim mit zadny npm, nic proste:


https://github.com/GuillaumeLeclerc/vue-google-maps/blob/master/dist/vue-google-maps.js
Citace
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
    <script src="vue-google-maps.js"></script>
</head>
<body>

<google-map style="width: 80%; height: 100%; position: absolute; left:0; top:0"
            :center="center"
            :zoom="zoom"
            @g-rightclick="onMapRightClick"
>
    <google-map-marker v-for="marker in markers" :position="marker.position" @g-click="onMarkerClick(marker)"/>
</google-map>

<script>
    VueGoogleMap.load({
        'key': 'AIzaSyCca3BtctZGXkMlZSk8hNXXw_j_EMYLDBI',
    })
    Vue.component('google-map', VueGoogleMap.Map);
    Vue.component('google-map-marker', VueGoogleMap.Marker);
    new Vue({
        el: 'body',
        data: {
            center: {
                lat: 1.38,
                lng: 103.8
            },
            zoom: 12,
            markers: [
                {position: {lat: 1.38, lng: 103.8}},
                {position: {lat: 1.37, lng: 103.8}},
                {position: {lat: 1.36, lng: 103.8}},
            ]
        },
        methods: {
            createMarker: function (lat, lng) {
                return {position: {lat, lng}}
            },
            onMapRightClick: function (input) {
                let newMarker = this.createMarker(input.latLng.lat(), input.latLng.lng());
                this.markers.push(newMarker);
            },
            onMarkerClick: function (input) {
                this.markers.splice(this.markers.indexOf(input), 1)
            }
        }
    });

</script>

</body>