MapSVG-laajennuskatsaus: Luo interaktiivisia karttoja WordPressiin

MapSVG-laajennuskatsaus: Luo interaktiivisia karttoja WordPressiin

MapSVG on hieno WordPress-laajennus, joka auttaa sinua luomaan interaktiivisia ja reagoivia karttoja WordPress-sivustolle. Monien mukavien ominaisuuksien ansiosta voit muuntaa minkä tahansa SVG-tiedoston vuorovaikutteisiksi karttoiksi. Se ei ole kaikki, voit luoda yksityiskohtaisia ​​pohjapiirroksia, infografioita, Google-karttoja, Chloropleth-karttoja, kuvakarttoja ja paljon muuta.


Tässä katsauksessa tarkastelemme ominaisuuksia, jotka tekevät MapSVG: stä yhden parhaista WordPressin kartoituslaajennuksista Webissä. Koetamme myös pluginia, joten pidä kiinni ja lue aina loppuun asti. Tämä on ehdottomasti paljon, joten hanki itsellesi muki kahvia ja käynti.

MapSVG Interaktiiviset kartat WordPressille

Kehittäjän erikoissuomalaisen Roman Stepanovin tuoma MapSVG tekee interaktiivisten karttojen luomisesta helppoa ja hauskaa. Minulla oli hauskaa leikkiä eri vaihtoehdoilla, vaikka minun piti ensin lukea dokumentaatio. Katsotaanpa MapSVG: n ominaisuuksia.

Yli 100 valmiskarttaa

MapSVG: n mukana on yli 100 maantieteellisesti kalibroitua karttaa, jotta voit osua maahan juoksuun. Maailmankartta on olemassa, ja se on jo jaettu napsautettaviin alueisiin (maihin). Sitten sinulla on maakartat kunkin valtion / provinssin kanssa. Saat myös muutama erikoiskartta.

Ja koska suurin osa kartoista on kalibroitu, voit lisätä merkkejä karttoihin osoitteen tai koordinaattien avulla. Tämän lisäksi voit luoda omia SVG-karttoja ja ladata ne MapSVG: hen.

Ainoa mitä sinun täytyy tehdä, on luoda SVG-kuva millä tahansa vektoreiden muokkausohjelmalla, kuten Inkscape tai Adobe Illustrator, ladata hiton asia ja mukauttaa se.

Tiedätkö mitä tämä tarkoittaa? Se tarkoittaa, että voit suunnitella interaktiivisia kaavioita ja visualisoida tilastoja (ja yleensä parantaa käyttökokemusta) taivuttamatta taaksepäin.

Tietokantaobjektit

MapSVG antaa sinun luoda objekteja ja lisätä niitä kartan tietyille alueille. Tämän avulla voit rikastuttaa karttojasi tiedoilla, jotka tarjoavat verkkosivustosi kävijöille kiehtovan kokemuksen.

Oletetaan esimerkkinä minuutin ajan, että olet kiinteistönvälittäjä, jolla on kiinteistöjä myydä koko maassa. Sinulla menee todella hyvin ja haluaisit näyttää käytettävissä olevat ominaisuudet kartalla. Haluat näyttää tietoja, kuten koko, osoite, hinta, valokuvat ja vastaavat.

MapSVG antaa sinun lisätä nämä tiedot tietokantaan ja liittää tiedot sitten yhteen tai useampaan kartan alueeseen. Aina kun käyttäjä napsauttaa määrittämääsi aluetta, esimerkiksi tilaa, yksityiskohdat näytetään mukavassa ponnahdusikkunassa, yksityiskohtaisessa näkymässä tai työkaluvihjeessä.

Suodatettava ja etsittävä hakemisto

Aivan kuin tietokantaobjektien lisääminen ei riitä, MapSVG antaa sinun luoda luettelon ja näyttää sen kartan vieressä. Kiinteistöanalogian kanssa voimme ehkä näyttää kaikki tietyssä tilassa saatavilla olevat kiinteistöt (tai edustajat). MapSVG tekee tämän erittäin mahdolliseksi.

Käyttäjät voivat suodattaa hakemiston kohteita avattavien suodattimien tai hakukentän avulla. Lisäksi käyttäjät voivat suodattaa kohteita napsauttamalla tiettyä aluetta kartalla. Tämä hakemisto-ominaisuus tekee jopa monimutkaisimmista kaavioista ja kartoista helpon ymmärtämisen. Lisäksi käyttäjät löytävät helposti tietoja, jotka ovat plus UX-laitteellesi.

Paranna Google Mapsia

Mainitsinko, että voit integroida MapSVG: n Google Mapsiin? Kyllä, voit ja tarvitset vain Google API -avaimen. Yleensä et voi mukauttaa Google Mapsia laajasti, mikä on tai voi olla rajoittava joissakin tilanteissa. MapSVG antaa sinun voittaa tämä haaste.

Miten? Voit kerrostaa vektorikarttoja minkä tahansa tyyppisen Google Map (maaston, satelliitin, tie- tai hybridi) päälle. Ja koska vektorikuvat ovat vuorovaikutteisia, voit muokata Google-karttaa, kunnes pudotat. Tässä itsestään selvä lopputulos on, että pystyt tarjoamaan enemmän käytettävyyttä.

Muista, että Google Mapsissa on joukko säätimiä. Yhdistä nämä hallintalaitteet MapSVG-ominaisuuksiin ja saat kirjallisuuden ajamaan käyttäjät hulluiksi jännityksestä. Ne tulevat olemaan kuin: “Kuinka helvettiin he tekivät sen?” Tämän ominaisuuden avulla voit parantaa Google-karttasi korostamalla maamerkkejä ja tekemällä mitä tahansa napsautettavissa.

CSS-, JavaScript- ja mallieditorit

Mitä hyötyä kartasta on, jota et voi mukauttaa tai laajentaa? Romanilla näyttää olevan tämä perusteltu mitä CSF- ja JavaScript-editoijilla. Niin kauan kuin tiedät koodisi, voit työntää interaktiiviset kuvasi rajoihin.

Ensinnäkin, voit muotoilla kartat ja kaaviot CSS: llä haluamallasi tavalla ja hikoilematta. Voit muotoilla monia elementtejä työkaluvihjeistä, ponnahdusikkunoista ja muista tietosäiliöistä. Lisäksi voit hyödyntää JavaScriptin tehoa laajentaaksesi oletuskarttatoimintoja.

Lisäksi saat mallieditorin, joka auttaa sinua luomaan mukautettuja malleja ponnahdusikkunoille, merkeille ja työkaluvihjeille. Mallieditori on helppo käyttää. Emme odota sinun joutuvan ongelmiin.

Intuitiivinen ohjauspaneeli, jossa suora esikatselu

Työskentely MapSVG: n kanssa on melko yksinkertaista intuitiivisen järjestelmänvalvojan kojelaudan ansiosta, joka tekee karttojen luomisesta helppoa. Karttojen ja muiden interaktiivisten kuvien luominen MapSVG: llä on helppoa alusta loppuun.

Lisäksi plugin sisältää live-esikatselutoiminnon, jonka avulla voit nähdä muutokset reaaliajassa. Nyt sinun ei tarvitse ihmetellä, kuinka karttasi näyttävät valmistumisen jälkeen. Lisäksi sinun ei tarvitse käydä edestakaisin (tai päivittää sivua) nähdäksesi miltä karttasi näyttävät. Kuinka suloista?

Kuvakartat

Mainitsimme kuvakartat muutama minuutti sitten, mutta minun piti peittää tämä ominaisuus yksinään, koska mielestäni se on vaikuttava. Tiedämme jo, että MapSVG muuntaa SVG-tiedostot interaktiivisiksi karttoiksi automaattisesti. Piirrä vain SVG-tiedosto, lataa se ja mukauta.

Mutta tiesitkö, että voit luoda karttoja myös PNG- ja JPEG-kuvista? Kuulostaa mielenkiintoiselta nyt, eikö niin? MapSVG sisältää loistavia piirtotyökaluja, joiden avulla voit luoda interaktiivisia (napsautettavissa olevia) karttoja rasterikuvista. Kuinka tästä on hyötyä? Voit piirtää interaktiivisia talosuunnitelmia, piirustuksia, reittejä, kaupunkisuunnitelmia, istumakarttoja ja paljon muuta.

Kiitos näille ominaisuuksille ja uskomattomia tuki, mikään ei pidä estää sinua luomasta karttoja ja interaktiivisia kuvia tästä galaksista. Taivas on raja tässä kaverit, koska MapSVG on tyhjä (ja luultavasti paras) karttalaajennus WordPressille.

Kuinka asentaa MapSVG ja luoda kartta

MapSVG: n asentaminen on yhtä helppoa kuin minkä tahansa muun tyypillisen WordPress-laajennuksen asentaminen. Olet valmis aloittamaan interaktiivisten karttojen luomisen heti, kun asennat ja aktivoit laajennuksen. Sinun ei tarvitse määrittää mitään, koska MapSVG toimii heti laatikosta.

Hanki MapSVG

Saamme käytännön kokemusta. Ota kopio MapSVG: stä ja seuraa seuraavia ohjeita. Kirjaudu WordPress-järjestelmänvalvojan hallintapaneeliin ja siirry kohtaan Laajennukset> Lisää uusi.

mapsvg WordPress -laajennusten arvostelu

Seuraavaksi paina upload nappi (1)Valitse tiedosto (2), ja osui Asenna nyt (3) -painike alla olevan kuvan mukaisesti.

mapsvg arvostelut

Odota asennus loppuun ja napsauta sitten Aktivoi laajennus nappi.

mapsvg arvostelu

Ja se on se; plugin on käyttövalmis aktivoinnin jälkeen. Klikkaa MapSVG WordPress-järjestelmänvalvojan kohde käynnistääksesi ohjauspaneelin.

mapsvg

Toistaiseksi niin hyvä, luulen, että hyväksyt prosessin olevan yksinkertainen. Ohjauspaneelissa voit valita yhden valmiista kartoista, luoda Google-kartan (ensin tarvitsee integrointia, joka on yhtä helppoa kuin API-avaimen kopiointi), rakentaa kuvakartan, ladata SVG-tiedoston tai ladata SVG-tiedosto Google-kartalla.

Jos tarvitset apua kartan luomiseen, saat nopean ohjeen napsauttamalla Oppaat tai Tuki linkit ohjauspaneelin yläosassa. Valitaan yksi jo olemassa olevista kartoista. Menen Kiinan kanssa koska kaikki tehdään siellä nykyään muutenkin ��

HUOM: Kehittäjä suosittelee käyttöä geo-kalibroitu kartat sijaan ei-kalibroitu karttoja, koska…

… Maantieteellisesti kalibroidut kartat ovat uudempia, niillä on aluetunnukset ja voit lisätä merkitsimiä geokordinaateilla (leveys / pituus) tai vain kirjoittamalla osoitteen, joka muutetaan automaattisesti koordinaateiksi. – MapSVG -oppaat

Valitse Kiina (tai mikä tahansa muu haluamasi kartta) Uusi SVG-kartta pudotusvalikosta. Jos vihaat vierityspalkkia, voit käyttää hakukenttää.

uuden kartan luominen mapsvg-tiedostoon

Täytä seuraavassa näytössä otsikko ja vaihda Esikatselun teksti jos olet niin taipuvainen. Samalla näytöllä voit asettaa karttakokoasi, kytkeä reagoivan suunnittelun pois (se on oletuksena päällä, joten älä kosketa valintakiekkoa), ottamaan käyttöön työkaluvihjeitä ja ponnahdusikkunat muun muassa.

Huomaat myös, että kartta on jo jaettu alueisiin (tapauksessamme Kiinan provinssit) ja niitä voidaan jo napsauttaa! Tutustu myös muihin säätimiin, mukaan lukien valikko pudotusvalikosta.

Muutetaan joitain värejä ja saadaan tunne pluginista. Navigoida johonkin Valikko> Värit kuten alla.

kartan värien muokkaaminen mapsvg WordPress -laajennuksessa

 värit näyttö auttaa sinua valitsemaan unelmiesi värit. Tarkoitan, että käyttämilläsi väreillä ei ole mitään rajoituksia. Työskentele vain värinvalitsimella, kunnes sinulla on jotain mitä pidät. Menen sinisen sävyin, koska WordPress on BAE ��

Valitse värit ja älä unohda osua Tallenna Ctrl + S -painiketta, kuten alla kuvaillaan.

Katso? Kerroin sinulle, että MapSVG on helppo käyttää. Muutin muutamalla napsautuksella karttavärejäni ja se tuntuu hyvältä – aivan kuten kerran, monta vuotta sitten, kun sijoittelin Googlessa ensimmäiselle sijalle. Kaikkien muiden kartan osien muokkaaminen on yhtä helppoa, ja todistan asiani lisäämällä työkaluvihjeitä, koska se olisi hauskaa.

Työkaluvihjeiden lisääminen MapSVG: hen

Joten miten lisäät työkaluvihjeitä, jotka ilmestyvät, kun hiiri kartan alueen päällä? Se on helppoa, ja näytän sinulle kuinka hetkessä.

Muuten, jos jotain ei ole selvää jostakin syystä, älä epäröi tarkistaa virkamiestä MapSVG-oppaat ja dokumentaatio. Vielä parasta, napsauta kommenttiosaa tämän viestin lopussa ja kutsun Thor vain sinulle. Tuo vasara ratkaisee kaiken ��

Sitä paitsi työkaluvihjeiden lisääminen sisältää mallin lisäämisen (muistatko aiemmin mainitsemasi mallieditori?). Sitä varten navigoi kohtaan Valikko> Mallit ja valitse sitten Aluetyökaluvihje. 

työkaluvihjeiden lisääminen mapsvg wordpress -laajennukseen

Lisää seuraavaksi seuraava koodi mallieditoriin ja paina Tallenna Ctrl + S -painike yllä olevan kuvan mukaisesti.

Maakunta: {{Otsikko}}

Yllä oleva koodi on yksinkertainen HTML Ohjaustangot. Jos haluat näyttää vain alueesi otsikon, käytä {{title}} -tunnistetta. Voit myös määrittää omat mukautetut kentät, kun opit hetkessä. Mutta ensin, käynnistämme työkaluvihjeominaisuuden.

Navigoida johonkin Valikko> Asetukset ja kytke päälle työkaluvinkit ominaisuus kuten alla kuvaillaan.

mapsvg arvostelut

Kuten yllä olevasta kuvakaappauksesta näet, työkaluvihjeemme ovat aktiivisia. Silti mainitsin, että näytän sinulle kuinka lisätä mukautettuja kenttiä, jotta voit rikastuttaa työkaluvihjeitäsi käsittämättömillä tavoilla. Oletetaan, että haluat lisätä valokuvia ja lisätietoja työkaluvihjeihisi. Kuinka jatkat? Siksi me pyydämme tietokantaobjektit mainitsimme aikaisemmin.

Mukautettujen kenttien lisääminen tietokantaobjektien kautta

MapSVG: n avulla voit lisätä mukautettuja kenttiä karttoihin. Meillä on jo {{title}} -kenttä, mutta katsotaan kuinka voimme lisätä muita mukautettuja kenttiä. Voit valita mukautettuja kenttiä mukaan lukien teksti, tekstialue, valintaruutu, kuvat, ja niin edelleen. Lisäämme joitain kuvia Nei Mongolin maakuntaan.

Mene Valikko> Alueet ja napsauta Muokkaa kenttiä -painiketta, kun korostamme alla olevassa kuvassa.

lisäämällä mukautettuja kenttiä MapSVG: hen

Paina seuraavassa näytössä Kuva -painike ja sitten Tallenna kentät -painike alla olevan kuvan mukaisesti.

Tallenna muutokset napsauttamalla Tallenna Ctrl + S painiketta. Muista aina tallentaa muutokset.

Seuraava osuma Lista -painike alla olevan kuvan osoittamalla tavalla.

Vaihda karttaan Muokkaa alueita ja napsauta aluetta (valitsimme Nei Mongolin). Sinun pitäisi nähdä uusi mukautettu kenttä (kuvat) oikealle. Lyö Selaa painiketta. Katso kuva alla.

Lisää seuraavassa näytössä kuvat ja napsauta Valitse Kuvat nappi.

Sinut ohjataan takaisin Muokkaa alueita ruutu, jossa sinun on napsautettava OK (1) painiketta. Napsauta seuraavaksi Tallenna Ctrl + S (2) -painiketta ja palaa sitten kohtaan Esikatselu (3) -tila kuten alla on esitetty.

Jos yrität hiirellä Nei Mongolin päälle tässä vaiheessa, kuvia ei näy työkaluvihjeessä. Miksi? Emme ole luoneet malleja kuville. Tehdään se oikea tällä hetkellä.

Navigoida johonkin Valikko> Mallit> Aluetyökaluvihje ja vaihda koodi tähän:

Maakunta: {{Otsikko}}
Ensimmäinen kuva:


Kaikki kuvat:
{{#kaikki kuvat}} {{/ Kukin}}

Tässä on kuva tarkempaa kuvaa varten. Muista osua Tallentaa nappi.

Kokeile nyt hiiri valitun alueen päällä (tapauksessamme Nei Mongol). Kerro mitä näet. Tätä näytölläni on.

Aika siisti, eikö niin? Olet juuri oppinut lisäämään mukautettuja kenttiä MapSVG-karttoihin. Ponnahdusikkunoiden ja merkkien lisääminen on myös yhtä helppoa kuin piirakka. Lisäksi niin kauan kuin tiedät nämä perusteet, voit luoda interaktiivisen kartan / kaavion auringon alla.

Työskentely MapSVG: n kanssa on neljännen luokan oppilaiden juttu, varsinkin kun Roman Stepanov tarjoaa erinomaista tukea ja uskomattomia ohjeita opetusohjelmien kautta. Jos haluat näyttää karttasi WordPress-sivustossasi, tallenna muutokset ja siirry kohtaan Sivut> Lisää uusi.

Seuraavaksi paina MapSVG -painiketta yllä esitetyllä tavalla ja valitse karttasi. Tämä lisää lyhyen koodin [mapsvg id = ”17 ″ title =” Kiina ”] WordPress-sivullesi. Voit joka tapauksessa lisätä kartan mihin tahansa sivustoosi käyttämällä lyhytkoodia. Älä huoli, MapSVG: llä luomasi kartat reagoivat 100%: iin, joten ne näyttävät hyvältä useissa laitteissa.

Seuraavaksi paina julkaisua ja näe tulokset käyttöliittymässä.

johtopäätös

Olisimme täällä koko päivän, jos käyisimme läpi jokaisen olemassa olevan ominaisuuden, mutta rohkenen sinua hankkimaan oman kopion MapSVG WordPress -karttalaajennus ja anna sille koeajo. Sinun ja minun välilläni, se on ainoa WordPress-karttalaajennus, jota ikinä tarvitset.

Onko sinulla kysyttävää tai ehdotusta? Älä epäröi tavoittaa alla olevan kommenttiosion kautta. Kippis!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map