nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Comenzando con Esri-Leaflet

ReneRubalcava

<\/HEAD>

<\/P>

Si nunca has usado Leaflet<\/A>, es una fantástica biblioteca de mapas ligera que ha crecido en popularidad a lo largo de los años, principalmente debido a la simplicidad de la API. Tiene montones de plugins y controles que se pueden usar con ella, incluyendo el plugin Esri-Leaflet<\/A> que te permite trabajar con servicios de ArcGIS Server y ArcGIS Online.<\/P>

<\/P>

Hay muchas cosas geniales en los

ejemplos<\/A> para Esri-Leaflet sobre cómo empezar con él, pero a veces me preguntan cómo un desarrollador podría incorporarlo en su flujo de trabajo de desarrollo<\/EM>. Los ejemplos son geniales para familiarizarse con el proyecto, pero a medida que una aplicación crece, las cosas pueden complicarse un poco. Solo quería mostrarte cómo podrías empezar desde cero con una solución más robusta.<\/P><\/P>

Obtén los componentes<\/H2>Para esta demostración, vas a necesitar node<\/A> y npm<\/A>. No nos preocupemos por todo el asunto de io.js. Una vez que tengas node y npm instalados, crea un directorio en tu máquina para tu proyecto. No necesita estar en un servidor local, nos encargaremos de eso con node<\/EM>. Con ese directorio creado, abre una terminal en él y ejecuta el siguiente comando en tu herramienta de línea de comandos preferida: npm init<\/SPAN><\/P><\/P>Acepta los valores predeterminados para las preguntas que te hagan. Cuando termines, tendrás un archivo package.json<\/STRONG> en tu directorio. Ahora necesitamos instalar un par de módulos para ayudarnos durante el desarrollo, incluyendo Leaflet y Esri-Leaflet.<\/P>npm install watchify --save-dev<\/SPAN><\/P>npm install http-server --save-dev<\/SPAN><\/SPAN><\/P>npm install leaflet --save<\/SPAN><\/SPAN><\/P>npm install esri-leaflet --save<\/SPAN><\/SPAN><\/P><\/P>

Configuración básica<\/H2>Con los módulos que necesitaremos instalados, vamos a configurar algunos archivos básicos.<\/P>Crea un archivo index.html<\/STRONG> en tu directorio que se verá así, nada sofisticado.<\/P><!DOCTYPE html>
<html>
    <head>
        <title>Iniciando Esri Leaflet<\/title>
        <link rel="stylesheet" href="http:\/\/cdn.leafletjs.com\/leaflet-0.7.3\/leaflet.css<\/A>" \/><\/SPAN>
        <link rel="stylesheet" href="css\/main.css" \/>
        <meta http-equiv="content-type" content="text\/html; charset=utf-8" \/>
        <meta name="viewport" content="initial-scale=1.0 maximum-scale=1.0">
    <\/head>
    <body>
        <script src="bundle.js"><\/script>
    <\/body>
<\/html><\/PRE>
<\/P>
A continuación crea un directorio css<\/STRONG> y hagamos un archivo simple main.css<\/STRONG> allí.<\/P>html, body, .map-div {
width : 100%;
height : 100%;
margin : 0;
}<\/PRE><\/P>A continuación crea un directorio src<\/STRONG> en tu proyecto y dentro del directorio src<\/STRONG> crea un archivo index.js<\/STRONG> y un archivo popup.js<\/STRONG>. Volveremos a este archivo en un segundo.<\/P><\/P>

Automatízalo<\/H2>Ahora abre el archivo package.json<\/STRONG> y hagamos algunas ediciones en la sección de scripts<\/EM>.<\/P>"scripts": {
"start": "http-server",
"watch": "watchify src\index.js src\popup.js -o bundle.js -dv",
"start-dev": "npm start | npm run watch"
}<\/PRE><\/P>Esta sección scripts te permitirá ejecutar comandos usando npm. Esto es realmente útil para configurar entornos de desarrollo rápidos. La sección start<\strong> ejecutará un servidor local de desarrollo en localhost:8080<\em>. La sección watch revisará cambios en los archivos especificados y los compilará usando watch script en package.json según sea necesario y sigue programando.<\/P><\/P>Aquí está la aplicación completa en github<\/A>.<\/P>
<\/P>
Esta es una configuración muy simple, pero honestamente podrías
hacer mucho<\/A> con los npm scripts<\/A> tal como están diseñados actualmente. Si quisieras profundizar con herramientas más robustas, podrías mirar cosas como gulp<\/A>, grunt<\/A> o webpack<\/A>. Sumérgete y aprende a amar tus herramientas de construcción.<\/P>
<\/P>
Para más consejos y trucos geodev visita
mi blog<\/A>.<\/P><\/BODY><\/HTML>

Encuentra más publicaciones etiquetadas con

GeoDev Adventures

Comentarios

There are no comments yet

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.