Archive | June, 2012

Leaflet.js Interactivity II: Allow Users to Add Points

29 Jun

In Part I, I showed how to use buttons to add and remove layers, and how to capture popup text and display it in a <DIV> element. In this post I will show how to allow users to create their own points with popups. Here is an image of the page with no input yet.

First, I created a blank map with just a Cloudemade Tile.

Second, I created a <DIV> to hold my form:

<div>
LAT:<input type=”text” id=”lat”>
LONG:<input type=”text” id=”long”>
POPUP:<input type=”text” id=”popuptext” value=”POPUPTEXT”>
<button onclick=”createPoint()”>Create Point</button>
</div>

Lastly, I create the function in the form:

function createPoint()
{
var lat = document.getElementById(‘lat’).value;
var long = document.getElementById(‘long’).value;
var pop = document.getElementById(‘popuptext’).value;
var latint = parseInt(lat);
var longint = parseInt(long);
var mora = new L.LatLng(latint, longint),
MSD = new L.Marker(mora);
map.addLayer(MSD);
MSD.bindPopup(pop);
}

To see it working go to EducationalFacilityPlanning.com/UserAddPoints.html

Try typing in 35, -106 for Lat and Long

This needs more work, like a function to allow the user to click on the map and get a long,lat pair:

map.on(‘click’, onMapClick);
var popup = new L.Popup();

function onMapClick(e) {
var latlngStr = ‘(‘ + e.latlng.lat.toFixed(3) + ‘, ‘ + e.latlng.lng.toFixed(3) + ‘)’;

popup.setLatLng(e.latlng);
popup.setContent(“You clicked the map at ” + latlngStr);

map.openPopup(popup);
}

But, more importantly, a function to save the points so the user can recreate their map.

 

Happy Hacking

 

Advertisements

OpenLayers and AutoCAD: OpenLayers.Layer.Image

20 Jun

I have wanted to get my own basemaps in to my web applications. I was looking at a TileServer but do not have the computer and setup to make it work. I started playing with OpenLayers because it allows you to import an image and use it as the base layer. I saw a tweet linking to a hand drawn, isometric, watercolor map of Reyjavik.

I was also playing around with importing AutoCAD in to Leaflet.js. Then I received a comment on a post that linked to FloorPlanMapper. Floorplanmapper uses AutoCAD in OpenLayers as an image like in the Reyjavik map.

So I decided to import a CAD file in OpenLayers and drop 2 points in to a room, then connect a popup to the points. This was my first attempt at OpenLayers and relied a lot on OpenLayers:PopUp Mayham.

Ideally, I would use polygons in the rooms but here is my AutoCAD and OpenLayers map:

OpenLayers is a mapping library that can be used to create applications that use CAD files as the base. Just another possibility and another reason to look cross discipline to deliver great services to your clients.

Here is my code: OpenLayerCAD

Leaflet.js Interactivity

19 Jun

I have been playing with Leaflet and while I am not a JavaScript pro, I wanted to make my map more of an application. Two things I have started working on: Adding buttons and capturing popups.

In Leaflet, to add or remove a layer you only need to call map.addLayer(layerName) and map.removeLayer(layerName). I created a function

addPoints(){map.addLayer(psfaschoolPoints);}

and then I created a hyperlink

<a href=”#” onClick=”addPoints()”>

I grabbed a button image and used it as the link. When you click the button, the map will add a layer.

Click Button to Add Layer

Red School Points are Added When Clicked.

The remove button does the same thing but uses the map.removeLayer() function.

I also wanted to capture popup info and display it on the webpage so I can display more data and do things with it. To display a popup in the webpage, I modified the popup function from Bryan McBride. Instead of:

popup.setContent(“…….”);

map.openPopup(popup);

I took the text in the setContent(), deleted the openPopup(), and used:

var container = document.getElementById(“display”);
container.innerHTML = “the text from setContent()”;

I have a DIV at the top of the page with an id=”display”. This is where the info from the popup will show up.

Top Line Will Open With PopUp Info

PopUp Displayed

Here is my full HTML file. It connects to my GeoServer so it will not work properly but you can see the code.

CODE

Import ArcGIS in to Revit

15 Jun

Saw a google search for importing GIS files in to revit. The way I move between GIS and CAD, because I don’t have ArcGIS, is using Autodesk Civil 3D. Civil includes Autodesk Map. You can simply go to the map menu and import. Select the SHP file, then export as AutoCAD. You can also draft and export a CAD file to SHPusing the same menus.

I am pretty sure that there is a toolbox in ArcGIS that will export a SHP as CAD. May require the data interoperability extension.

Remember, Revit does not like files that cover an area greater than 20 miles or so. You may need to crop your SHP.