1/8/2015
MapCity API - Tutorial
Poweredby
OpenLayers
Desarrolladocon
SyntaxHighlighter2.0
APIdeMapasyGeocodificacin
Tutorial
Contenidos
Introduccin
ActualizacionesdelaAPI
Ejemplos
Lobsico
Movimentodelmapayanimacin
Agregandocontrolesalmapa
AgregandoMarcadores
AgregandoGeometrasGeoreferenciadas
LlamadasaServiciosdeMapCity
Widgets
Resolucindeproblemas
Introduccin
[Link]
delostiposycontrolesdeOpenLayers,porlotantolamayoradelasfuncionesdeOpenLayersaplicanalasfunciones
[Link],peroencasodesernecesarioelatributo
[Link].
AntesdeincluiralgunalibreraJavascript(porejemploparaanimaciones,llamadasAJAX,etc),tenerencuentaquela
[Link]
[Link],[Link]()sedebe
[Link]().
Ejemplo:
Sepuedeverunejemplobsicodelusodelaapienejemplo.
HelloWorld
[Link]
configuracinbsicapordefecto:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPEHTMLPUBLIC"//W3C//DTDXHTML1.0Strict//EN"
"[Link]
<htmlxmlns="[Link]
<head>
<metahttpequiv="contenttype"content="text/htmlcharset=UTF8"/>
<title>MapCityHelloWorld</title>
<scripttype="text/javascript"src="[Link]
<scripttype="text/javascript">
//<{
[Link]
1/13
1/8/2015
14
15
16
17
18
19
20
21
22
23
MapCity API - Tutorial
varmap=[Link]('map')
})
//]]>
</script>
</head>
<body>
<divid="map"style="width:500pxheight:300px"></div>
</body>
</html>
[Link]
lallavecorrespondientealdominio([Link]).
[Link]
unaversinaotraslocambiandoelnmerodeversin.
viewplain|print|?
<scripttype="text/javascript"src="[Link]
[Link]:
Lobsico
Elsiguienteejemplo(elmismofragmentousadoenelejemploalprincipio)creaunmapaylocentraenSantiago,Chile.
PuedesnavegarporelmapaarrastrndolotalcomoenelsitioMapCity
viewplain|print|?
1
2
varmap=[Link]('map')
[Link]([Link]['santiago'].lonlat)
[Link]
[Link]
[Link]:
Provider:[Link].
Country:[Link](chile),Per(peru),Mexico(mexico),Brasil(brasil)y
Argentina(argentina)
Type:Tipodelmapa(dependedelprovider).Mapcitysoportavectorial(vector),guaMapCity(guide)yfotorea
(photo)
:LafotoreaestdisponiblesloenChileylaGuaMapcitysloenSantiagoylaQuintaRegin.
viewplain|print|?
1
2
3
4
5
varmap=[Link]('map1',{
country:'chile'
,provider:'mapcity'
,type:'guide'
})
Movimentodelmapa
Estnimplementadaslasoperacionesbsicasdelmapa:
getCenter
[Link]
2/13
1/8/2015
MapCity API - Tutorial
getZoom
pan
panTo
setCenter
getScale
getZoomForExtent
zoomOut
zoomIn
zoomTo
zoomToExtent
zoomToMaxExtent
AgregandocontrolesalMapa
[Link]
[Link]:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
varmap=[Link]('map',{
country:'chile'
,provider:'mapcity'
,controls:[
[Link]({north:true})
,[Link]({south:true})
,[Link]({east:true})
,[Link]({west:true})
,[Link]()
,[Link]()
,[Link]({zoomWheelEnabled:false})
,[Link]({
vector:true
,photo:true
,guide:true
})
,[Link]({
measureline:true
,measurepolygon:true
,dragpan:true
,zoomin:true
,zoomout:true
,infostreet:true
,infogse:true
})
]
})
Ntesequeenelejemplosesobrescribielatributocontrols,porlotantoseeliminarontodosloscontrolespor
[Link](control).
[Link]
[Link]
[Link].
AgregandoMarcadores
Unavezquesehacreadoelmapa,[Link]
[Link]
3/13
1/8/2015
MapCity API - Tutorial
usandoelmtododeOpenLayers:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
varicon=[Link](
'[Link]
,[Link](80,25)
)
varlonlat=[Link]('santiago').lonlat
varmarker=[Link](
lonlat
,icon
)
[Link](null,marker)
[Link],[Link]
[Link],sedebeagregarelpopupalmapayeleventoal
[Link],espreferibleocuparelmtodosimpleprovistoporlaAPIquecreaelmarkeryelpopupenunasola
llamada:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
varicon=[Link](
'[Link]
,[Link](80,25)
)
varlonlat=[Link]('santiago').lonlat
varmlayer=[Link]('testLayer','marker')
[Link](
mlayer
,lonlat
,'<b>Prueba</b>HTML'
,icon
,true
,true
,[Link]
,true//PropiedadShow:Siestactivaelpopupsemuestraenformainmediata
)
[Link]:
Anchored
AnchoredBubble
Framed
FramedCloud
[Link]
4/13
1/8/2015
MapCity API - Tutorial
Adems,[Link]:
addMarker
removeMarker
removeAllMarkers
AgregandoGeometriasGeoreferenciadas
[Link]:
viewplain|print|?
1
2
3
4
5
6
7
8
varvlayer=[Link]('testLayer','vector')
varfeature=[Link](
null
,'MULTILINESTRING((70.641926904509733.4487538416692,70.64225189517533.44751
)
Parausarunpopupalageometra,existeunmtodoprovistoporlaAPIquecrealageometrayelpopupenunasola
llamada:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
varvlayer=[Link]('testLayer','vector')
varfeature=[Link](
layer
,'MULTILINESTRING((70.641926904509733.4487538416692,70.64225189517533.4475146
,'<b>FeatureWKTPopUp</b>HTML'
,true
,true
,[Link]
,true//PropiedadShow:Siestactivaelpopupsemuestraenformainmediata
)
[Link]:
Anchored
AnchoredBubble
Framed
FramedCloud
Adems,[Link]:
removeAllFeatures
LlamadasaServiciosdeMapCity
LaAPIofreceunconjuntodeclasesquesimplificanelusodelosserviciosofrecidosporMapCity.
BsquedadeCalles
[Link]
[Link]
5/13
1/8/2015
MapCity API - Tutorial
alternativa,[Link]:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
varsearchStreet=[Link]()
[Link]({
street:'Carmen'
,number:'339'
,district:''
,region:'13'
,limit:10
untry:'chile'
}
,function(json,product,service){
//HacerAlgoconelretornoDireccionesRetornadas
}
)
[Link],sebuscarausandoelformato"Callenmero,comuna".El
segundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
[Link],tienela
siguienteestrcutura:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{"totalCount":7,"geocoding":[{"id":0,"district":"SANTIAGO","class":"CALLE","idStreet"
:"325080","name":"CARMEN","number":"339","region":"325080","lon":"70.6422636171245","lat":"33.448007
,"utmX":"347357.77562023","utmY":"6297826.46899508"},{"id":1,"district":"NUNOA","class":"CALLE",
:"316292","name":"CARMENCOVARRUBIAS","number":"339","region":"316292","lon":"70.6115576526468"
:"33.45645113230","utmX":"350226.599877587","utmY":"6296934.92532822"},{"id":2,"district":"MAIPU"
:"CALLE","idStreet":"300063","name":"CARMENLUISACORREA","number":"339","region":"300063","lon"
.761391032398","lat":"33.5116662849","utmX":"336403.747779704","utmY":"6290586.06892345"},{"id":3,"
:"SANJOAQUIN","class":"CALLE","idStreet":"280248","name":"CARMENMENA","number":"339","region":
,"lon":"70.6283705187456","lat":"33.51005021647","utmX":"348757.110901726","utmY":"6290967.131017"
},{"id":4,"district":"MELIPILLA","class":"CALLE","idStreet":"214917","name":"ELCARMEN","number"
,"region":"214917","lon":"71.1500158781588","lat":"33.64667305929","utmX":"300613.488235724","utmY"
:"6274933.0242643"},{"id":5,"district":"PAINE","class":"CALLE","idStreet":"202273","name":"DELCARMEN"
,"number":"339","region":"202273","lon":"70.7216645491735","lat":"33.80439408138","utmX":"340634.718
,"utmY":"6258186.93070667"},{"id":6,"district":"LAREINA","class":"CALLE","idStreet":"322095","name"
:"SALARDELCARMEN","number":"339","region":"322095","lon":"70.5347309720127","lat":"33.45558645971"
,"utmX":"357365.919964024","utmY":"6297138.91989145"}]}
[Link]
"geocoding"y"searchstreet".Porltimo,[Link]
[Link]:chile,argentina,peru,brasilymexico.
BsquedadeIntersecciones
[Link]
existirmsdeunaalternativa,[Link]:
viewplain|print|?
[Link]
6/13
1/8/2015
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
MapCity API - Tutorial
varsearchStreet=[Link]()
[Link]({
street1:'SanSebastian'
,street2:'IsidoraGoynechea'
,district:''
,region:'13'
,limit:10
,country:'chile'
}
,function(json,product,service){
//HacerAlgoconelretorno
}
)
[Link]
[Link]
[Link],tienelasiguienteestrcutura:
viewplain|print|?
1
2
3
4
5
{"totalCount":1,"searchintersection":[{"id":0,"classStreet1":"AVDA","nameStreet1":"VITACURA"
,"districtStreet1":"LASCONDES","lon":"70.6035191","lat":"33.4138132","utmX":"350900.823","utmY"
.408"}]}
[Link]
"geocoding"y"searchintersection".Porltimo,[Link]
[Link]:chile,argentina,peru,brasilymexico.
Informacindecalle
[Link]
delusodeesteservicio:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
varstreetInfo=[Link]()
[Link]({
lon:'70.642281434'
,lat:'33.4479398164'
}
,function(json,product,service){
//HacerAlgoconelretorno}
)
ElsegundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
[Link],tienela
siguienteestrcutura:
[Link]
7/13
1/8/2015
MapCity API - Tutorial
viewplain|print|?
1
2
3
4
5
{"totalCount":1,"searchintersection":[{"id":0,"classStreet1":"AVDA","nameStreet1":"VITACURA"
,"districtStreet1":"LASCONDES","lon":"70.6035191","lat":"33.4138132","utmX":"350900.823","utmY"
.408"}]}
[Link]
"geocoding"y"streetinfo".
InformacindecalleporID
Elserviciodeinformacindecalledevuelvelainformacindelacalleporid(elidentregadoproelserviciosearchstreet).El
siguienteesunejemplodelusodeesteservicio:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
varstreetInfoById=[Link]()
[Link]({
idStreet:13243
}
,function(json,product,service){
//HacerAlgoconelretorno}
)
ElsegundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
[Link],tienela
siguienteestrcutura:
viewplain|print|?
1
2
3
4
5
{"totalCount":1,"searchintersection":[{"id":0,"classStreet1":"AVDA","nameStreet1":"VITACURA"
,"districtStreet1":"LASCONDES","lon":"70.6035191","lat":"33.4138132","utmX":"350900.823","utmY"
.408"}]}
[Link]
"geocoding"y"streetinfobyid".
Sugerencias
ElserviciodeSugerencias,[Link]
servicio:
viewplain|print|?
1
2
3
4
5
varsuggest=[Link]()
[Link]({
street:'alam'
[Link]
8/13
1/8/2015
6
7
8
9
10
11
12
13
14
MapCity API - Tutorial
,district:'santiago'
,limit:'10'
}
,function(json,product,service){
//HacerAlgoconelretorno
}
)
Elparmetrodistrictesopcional,encasodeexistir,[Link]
[Link]
[Link],tienelasiguienteestrcutura:
viewplain|print|?
1
2
3
4
5
6
7
8
9
{"totalCount":20,"suggest":[{"id":0,"street":"ALAMO"},{"id":1,"street":"ALAMOS"},{"id"
:2,"street":"ALAMEDA"},{"id":3,"street":"ALAMOALTO"},{"id":4,"street":"ELALAMO"},{"id":5,"street"
ALAMOS"},{"id":6,"street":"ELALAMEIN"},{"id":7,"street":"LAALAMEDA"},{"id":8,"street":"ALAMEDADOS"
},{"id":9,"street":"ALAMEDAUNO"},{"id":10,"street":"LUISALAMOS"},{"id":11,"street":"SIMONALAMO"
{"id":12,"street":"TRESALAMOS"},{"id":13,"street":"ALAMEDASEIS"},{"id":14,"street":"ALAMEDATRES"
,{"id":15,"street":"ALAMOHUACHO"},{"id":16,"street":"CARLOSALAMOS"},{"id":17,"street":"LAALAMBRADA"
},{"id":18,"street":"SERGIOALAMO"},{"id":19,"street":"ALAMEDACINCO"}]}
[Link]
"geocoding"y"suggest".
SugerenciasdeComuna
ElserviciodeSugerencias,[Link]
servicio:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
varsuggest=[Link]()
[Link]({
district:'alam'
,limit:'10'
}
,function(json,product,districtsuggest){
//HacerAlgoconelretorno
}
)
ElsegundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
[Link],tienela
siguienteestrcutura:
viewplain|print|?
[Link]
9/13
1/8/2015
1
2
3
4
5
6
MapCity API - Tutorial
{"totalCount":10,"districtSuggest":[{"id":0,"district":"SANANTONIO"},{"id":1,"district"
:"SANBERNARDO"},{"id":2,"district":"SANCARLOS"},{"id":3,"district":"SANCLEMENTE"},{"id":4,"district"
:"SANESTEBAN"},{"id":5,"district":"SANFABIAN"},{"id":6,"district":"SANFELIPE"},{"id":7,"district"
:"SANFERNANDO"},{"id":8,"district":"SANIGNACIO"},{"id":9,"district":"SANJAVIER"}]}
[Link]
"geocoding"y"districtsuggest".
BsquedadeComuna
ElserviciodeSugerencias,[Link]
servicio:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
varsuggest=[Link]()
[Link]({
district:'alam'
,simplify:0.0001
}
,function(json,product,districtsuggest){
//HacerAlgoconelretorno
}
)
[Link]
[Link]
[Link],tienelasiguienteestrcutura:
viewplain|print|?
1
2
3
{"totalCount":1,"searchdistrict":[{"id":0,"label":"LASCONDES","wkt":"MULTIPOLYGON(((70.4726700665622
[Link]
"geocoding"y"searchdistrict".
entorno
Elserviciodeentorno,[Link]:
viewplain|print|?
1
2
3
4
5
varenviroment=[Link]()
[Link]({
idArco:'324983'
[Link]
10/13
1/8/2015
6
7
8
9
10
11
MapCity API - Tutorial
}
,function(json){
[Link]('status_enviroment').innerHTML='enviromentOK:wkt='
}
)
ElsegundoparmetroparaelmtodogetcorrespondealafuncinqueseejecutarcuandosefinalizelallamadaalWeb
[Link],tienela
siguienteestrcutura:
viewplain|print|?
1
2
3
4
5
6
{"totalCount":1,"enviroment":[{"id":0,"id_nombre_calle":"13399","clase_calle":"CALLE"
,"region":"13.0000000000","calle_perp_1":"ROOT","calle_perp_2":"MARIN","calle_para_1":"MANUELANTONIO
TOCORNAL","calle_para_2":"SANISIDRO","avda_perp_1":"LIBERBERNARDOO`HIGGINS","avda_perp_2":"DIEZDE
JULIOHUAMACHUCO","avda_para_1":"STAROSA","avda_para_2":"PORTUGAL","ornt_avda_perp_1":"sur","ornt_avd
:"poniente","ornt_avda_para_1":"oriente","ornt_avda_para_2":"70.6423233213351","mid_arco_x":"oriente"
,"mid_arco_y":"70.6423233213351"}]}
Widgets
LosWidgetssimplificaneldesarrollodecomponentesdeinterfazgrficaspotenciadosporlosserviciosdeMapCity,
transformandocomponentesHTMLestndardencomponentesAJAX.
ComboBoxparaBsquedadeCalles
Elcomboboxparabsquedadecalles,transformauntextboxhtmlyunbotnhtmlenuncomboboxdebsquedadecalles
[Link]:
viewplain|print|?
1
2
3
4
5
<formid="simple">
<inputid="search"type="text"/><inputid="action_search"type="button"value="buscar"/>
</form>
<divid='resultados'>
</div>
yeljavascriptelsiguiente:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
varsearch=[Link]({
input:'search'
,action:'action_search'
,width:300
.height:10
,before:function(){}
,actionCallback:function(json,product,service){
}
})
ComboBoxparaBsquedaAvanzadadeCalles
[Link]
11/13
1/8/2015
MapCity API - Tutorial
Elcomboboxparabsquedadecalles,transforma4textboxhtmlyunbotnhtmlenuncomboboxdebsquedadecalles
[Link],pordireccin,[Link]
decualseutilizo,[Link]:
PorCalle:Sislosellenaelcampocalle,serealizarunabsquedadecalleusandoelproductogeocodingyel
serviciosearchstreet
Pordireccin:Sisellenaelcampocalleyaltura,serealizarunabsquedadedireccinusandoelproducto
[Link],sebscarausandoelproducto
geocodingyseachintersection
PorComuna:Sislosellenaelcampocomuna,serealizarunabsquedadecalleusandoelproductogeocodingy
elserviciosearchdistrict
Paraeljsonretornadoporcadabsqueda,[Link],siexistecomunacuandose
ingresauncalle,[Link]:
viewplain|print|?
1
2
3
4
5
6
<formid="avanzada">
<inputid="a_street"type="text"/><inputid="a_number"type="text"/><inputid="a_intersection"type
<inputid="action_a_search"type="button"value="buscar"/>
</form>
<divid='a_resultados'>
</div>
yeljavascriptelsiguiente:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
varsearch=[Link]({
street:'a_street'
,number:'a_number'
,district:'a_district'
,intersection:'a_intersection'
,action:'action_a_search'
,widthStreet:300
,widthDistrict:300
,widthIntersection:300
,before:function(){}
,actionCallback:function(json,product,service){
}
})
ComboBoxparaBsquedadeIntersecciones
Elcomboboxparabsquedadecalles,transforma2textboxhtmlyunbotnhtmlenuncomboboxdebsquedadecalles
[Link]:
viewplain|print|?
1
2
3
4
5
6
<formid="interseccion">
<inputid="i_street1"type="text"/><inputid="i_street2"type="text"/>
<inputid="action_i_search"type="button"value="buscar"/>
</form>
<divid='i_resultados'>
</div>
[Link]
12/13
1/8/2015
MapCity API - Tutorial
yeljavascriptelsiguiente:
viewplain|print|?
1
2
3
4
5
6
7
8
9
10
varsearch=[Link]({
street1:'i_street1'
,street2:'i_street2'
,action:'action_i_search'
,width:300
,before:function(){}
,actionCallback:function(json){
}
})
Resolucindeproblemas
Enviarunmailconlaconsultaaapi@[Link]
[Link]
13/13