muni14 - Generador de Departamentos y Municipios (JavaScript)

[JaiMe]

Muni14

Generador de departamentos y municipios para El Salvador (JavaScript)

Luego de leer este tema http://www.svcommunity.org/forum/base-de-datos/base-de-datos-de-municipios/, decidi hacer una mi propia version. Me imagino que en mas de algun proyecto le podria ser de uso a los desarrolladores de la comunidad, por lo tanto comparto el codigo.

Decidi crear un tema nuevo porque este es un 'proyectito' que pienso mantener con la ayuda de ustedes.

pd: Naruto tiene una version muy buena y construí la lista de municipios en base a su version.

Uso:

El uso es simple. La idea es que tome menos de 10 segundos en setup y sea 'unobstrusivo'. Solamente agrega una o mas select boxes a tu pagina y asignales un atributo id.

Código: [Seleccionar]

<select id="departamentos"></select>
Copia el codigo en esta pagina y guardalo en muni14.min.js

Código: [Seleccionar]

http://is.gd/XtaVN9
Luego, agrega una referencia al script y utiliza la funcion addDepts pasando como argumento el id del elemento select para generar la lista de departamentos. Por ejemplo:

Código: [Seleccionar]

<script src="muni14.min.js"></script>
<script>
window.onload =function(){
muni14.addDepts('departamentos');
};
</script>
El script creara un elemento select adicional que se actualizara dinamicamente con la lista de municipios dependiendo del departamento selecionado. Si el id del select box con los departamentos es departamentos el id del select box con los municipios sera departamentos-munis.

Ejemplo
Abre esta pagina para ver un ejemplo mas detallado

Código: [Seleccionar]

http://is.gd/imnsMm
Leer codigos

Los departamentos y municipios siguen el sistema de codificacion oficial, por ejemplo San Salvador, Soyapango es "0618"

Para leer codigos solo usa la funcion getDeptMuni con el codigo en una cadena de texto

Código: [Seleccionar]

muni14.getDeptMuni("0618"); // San Salvador, Soyapango
Otras Funciones

Para obtener el departamento solo usa la funcion getDept y pasa como argumento el codigo del departamento como cadena de texto o como numero.

Código: [Seleccionar]

muni14.getDept('03'); // Sonsonate
muni14.getDept(3); // Sonsonate
Codigo

Pueden colaborar editando la lista de municipios, creo que el orden no esta correcto en algunos departamentos. por ejemplo si San Miguel es codigo '01' entonces Carolina es municipio '01', por lo tanto el codigo 0101 regresaria San Miguel, Carolina.

"dept":"San Miguel", "munis":["Carolina","Chapeltique","Chinameca","Chirilagua"]

Supongamos que Chapeltique es 0101, para solucionarlo solo tendriamos que modificar el codigo y mover Chapeltique

"dept":"San Miguel", "munis":["Chapeltique","Carolina","Chinameca","Chirilagua"]

El script se encarga de ajustar los indices de los arrays.

github repo

Código: [Seleccionar]

http://is.gd/xex3o9Zip

Código: [Seleccionar]

http://is.gd/YkmBvh
Colabora y enjoy 


UPDATE Sun April 3, 2011

Build YAML


link: http://is.gd/fLomlJ

Abre build-yml.html para generar los archivos departamentos.yml y municipios.yml los cuales pueden ser usados para cargar la base de datos en frameworks como Ruby on Rails.

Como usar los archivos yml en rails

Primero genera los siguientes modelos

Código: [Seleccionar]

    rails generate model Departamento
    rails generate model Municipio
Luego crea las asociaciones

Código: [Seleccionar]

    class Departamento < ActiveRecord::Base
        has_many :municipios
    end

    class Municipio < ActiveRecord::Base
        belongs_to :departamento
    end

Modifica las migraciones a manera que asemejen lo siguiente

Código: [Seleccionar]

    class CreateMunicipios < ActiveRecord::Migration
        def self.up
            create_table :municipios do |t|
                t.string :municipio
                t.references :departamento
                t.timestamps
            end
        end
   
        def self.down
            drop_table :municipios
        end
    end
   
    class CreateDepartamentos < ActiveRecord::Migration
        def self.up
          create_table :departamentos do |t|
              t.string :departamento
              t.timestamps
          end
         end
   
         def self.down
              drop_table :departamentos
         end
    end
Modifica las fixtures (tests/fixtures/*.yml) generadas copiando la información de esta pagina

luego migra la base de datos y carga la informacion en la base de datos desde las fixtures

Código: [Seleccionar]

    rake db:migrate
    rake db:fixtures:load

Puedes probar lo siguiente en tu base de datos (en este caso usamos sqlite)

Código: [Seleccionar]

    sqlite> select id,departamento from departamentos;
    1|Ahuachapán
    2|Santa Ana
    3|Sonsonate
    4|Chalatenango
    5|La Libertad
    6|San Salvador
    7|Cuscatlán
    8|La Paz
    9|Cabañas
    10|San Vicente
    11|Usulután
    12|San Miguel
    13|Morazán
    14|La Unión
   
    sqlite> select id,municipio from municipios;
    101|Ahuachapán
    102|Jujutla
    103|Atiquizaya
    104|Concepción de Ataco
    105|El Refugio
    106|Guaymango
    107|Apaneca
    108|San Francisco Menéndez
    110|San Pedro Puxtla
    111|Tacuba
    112|Turín
    201|Candelaria de la Frontera
    202|Chalchuapa
    203|Coatepeque
    204|El Congo
    205|El Porvenir
    206|Masahuat
    207|Metapán
    208|San Antonio Pajonal
    209|San Sebastián Salitrillo
    210|Santa Ana
    211|Santa Rosa Guachipilín
    212|Santiago de la Frontera
      ........
Tambien desde la consola de rails

Código: [Seleccionar]

    rails console

    > Departamento.find(6)
    => #<Departamento id: 6, departamento: "San Salvador"...>
    > Departamento.find(6).municipios
    => [#<Municipio id: 601, municipio: "Aguilares", departamento_id: 6,..>,
        #<Municipio id: 602, municipio: "Apopa", departamento_id: 6,....>,
        #<Municipio id: 603, municipio: "Ayutuxtepeque", departamento_id: 6...>...]


    > Municipio.find(618)
    => #<Municipio id: 618, municipio: "Soyapango", departamento_id: 6,..>
    > Municipio.find(618).departamento
    => #<Departamento id: 6, departamento: "San Salvador",...>

[hkadejo]

Me gusto este script felicidades Jaime  pero generalmente me gusta usar Jquery UI para mis proyectos (ya saben para que se vean bonitas las paginas) entonces pense porque no tener un widget de jquery UI con la funcionalidad de departamento-municipio???

Y bueno para no molestar a Jaime que lo hiciera, pues lo he hecho yo y aqui esta!!

Como adivinaran he utilizado como "core" del widget el script de Jaime, para la apariencia me he basado en este plugin http://quasipartikel.at/multiselect/ y la gran ventaja del widget es que la apariencia puede ser modificada como los otros widgets de Jquery UI sin ningun esfuerzo. He aqui un ejemplo de como se ve con otros "theme"

Por el momento faltan los metodos para devolver el municipio y departamento, refactorizar el codigo, documentarlo, etc. En los siguientes dias lo ire posteando 

Pagina de ejemplo
http://hkadejo.github.com/jquery-ui-muni14/

Pagina de proyecto y descarga
https://github.com/hkadejo/jquery-ui-muni14

[JaiMe]

Nice!

Que bueno es verlo implementado en jQuery UI. :-)

[ken2]

  Jaime pasate el js o css completo de ese bonito theme!
http://img847.imageshack.us/img847/1478/screenshot20110402at840.png

[hkadejo]

Jaime pasate el js o css completo de ese bonito theme!
http://img847.imageshack.us/img847/1478/screenshot20110402at840.png

Creo que el select box se ve asi, porque Jaime lo prueba en el Mac OS X.

[rdoggsv]

hey que perfecto Jaime y hkadejo, tanto por compartir y por traer de nuevo temas de programación a la comunidad 

Yo los saco desde BD siempre los tengo guardados, una tabla para Departamentos y otra tabla para Municipios. En un proyecto me decidí hacer algo que me ayudará a utilizarlo en otros proyectos y llegue al siguiente código.

Lo que hace es hacer un fetch de la página de los municipios de wikipedia, y hacer un scrape de todos los departamentos y municipios  , utiliza Nokogiri y ActiveRecord.

Si quieren guardar sus departamentos y municipios en BD les puede servir mucho 

Código: [Seleccionar]

require 'nokogiri'
require 'open-uri'
require 'mysql2'
require 'active_record'

//Reemplazar con base de datos, usuario y contraseña respectivos a proyecto.
ActiveRecord::Base.establish_connection(
  :adapter  => 'mysql2',
  :database => 'rdogg_development',
  :username => 'rdogg',
  :password => 'Rd0gg',
  :host     => 'localhost')

class Departamento < ActiveRecord::Base
  has_many :municipios
end

class Municipio < ActiveRecord::Base
  belongs_to :departamento
end

#Abrir utilizando nokogiri la página en la que estamos interesados obtener los municipios
doc = Nokogiri::HTML(open('http://es.wikipedia.org/wiki/Anexo:Municipios_de_El_Salvador'))

#Obtener los titulos de los departamentos
departamentos = doc.css('h2 span.mw-headline')

#Obtener los municipios
municipios = doc.css('div#bodyContent > ul')

#Definir un contador para ayudar a obtener la relación departamento -> municipio
i = 0

#Recorrer departamentos, evitar el ultimo h2 debido a que no es departamento
departamentos.each do |d|
  unless d == departamentos.last
    #Imprimir nombre del departamento
    puts d.inner_text
    padre = Departamento.create!(:departamento => d.inner_text)
    municipios[i].css('li a').each do |m|
      #Imprimir cada uno de los municipios
      puts "  " + m.inner_text
      padre.municipios.create!(:municipio => m.inner_text)
    end
    i += 1
  end
end

Para una Base de datos creada con el siguiente código

Código: [Seleccionar]

CREATE TABLE `rdogg_development`.`departamentos` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`departamento` VARCHAR( 50 ) NOT NULL
) ENGINE = MyISAM;

CREATE TABLE `rdogg_development`.`municipios` (
`id` INT NOT NULL AUTO_INCREMENT ,
`municipio` VARCHAR( 50 ) NOT NULL ,
`departamento_id` INT NOT NULL ,
PRIMARY KEY ( `id` ) ,
INDEX ( `departamento_id` )
) ENGINE = MyISAM;
Después de ejecutar el script te quedá algo así, para un total de 14 departamentos, con un total de 262 municipios.

Departamentos
Showing rows 0 - 13 (~14 total, Query took 0.0001 sec)

Municipios
Showing rows 0 - 261 (~262 total, Query took 0.0003 sec)

[moyo18]

interesante xD. gracias por poner algo asi.

[JaiMe]

rdoggsv probe tu script y cumple su proposito.

Se me ocurrió actualizar muni14 y agregarle un generador de archivos yml en base al muni14.js. Estos archivos pueden ser usados para cargar la información en varios frameworks.



link http://is.gd/fLomlJ

La ventaja de este metodo es que la base de datos guarda los municipios y sus respectivos codigos y es lo suficientemente flexible puesto que es database agnostic. Otra ventaja es que no requiere scraping.

pd: siento que estamos en el basement de SVC! IMHO este subforo deberia ser promovido a un lugar mas visible para promover projectos similares.

[rdoggsv]

Desde que estoy usando activerecord es database agnostic

Cambias tus parametros de conexion y entras a cualquier DB

Ya cuando lo sacas una vez en realidad podria guardar el xml, csv, sql, etc. Pero adonde quedaria la emocion jajaja

[hkadejo]

pd: siento que estamos en el basement de SVC! IMHO este subforo deberia ser promovido a un lugar mas visible para promover projectos similares.

Exacto eso mismo pense porque lo movieron hasta aca??? en Programacion creo que es mas visible...yo votaria por moverlo ahi.

[hkadejo]

He actualizado el script jquery-ui-muni14, he agregado una cajita de texto en la parte superior que sirve como buscador, uno escribe por ejemplo "0614" y aparece seleccionado el departamento de San Salvador (06) y el municipio de San Salvador (14) y viceversa si seleccionas un departamento y el municipio del listado, el codigo aparece reflejado en la caja de texto:

Este script es un pequeño proyecto que espero ir mejorando poco a poco, si alguien tiene ideas o sugerencias o encuentran bugs todo es bienvenido

DEMO: http://hkadejo.github.com/jquery-ui-muni14/

[JaiMe]

Buen trabajo khadejo!





La unica observación es que los codigos deberian ser ajustados de acuerdo  a la función  getDeptMuni del script original puesto que esta sigue la codificación oficial.



pd: gracias vlad por regresar el tema a esta seccion.

[hkadejo]

Buen trabajo khadejo!





La unica observación es que los codigos deberian ser ajustados de acuerdo  a la función  getDeptMuni del script original puesto que esta sigue la codificación oficial.



pd: gracias vlad por regresar el tema a esta seccion.

Si creo que le estoy haciendo un -1 a algun indice....ya vere eso mas tarde...gracias. 

[=SV=Mike]

me siento un poco  en este tema hablan en una lengua extranjera para mi estos tipos  benditas programaciones      pero sigan algun dia les entenderé algo