How to create a more interactive map with DW hotspot tool

Hi - I've been asked to put together a map for my client. I want to avoid getting into GMaps and all of that and just want to make a simple one myself. Here's an explanation of what I'm trying to do:
http://designerandpublisher.com/montrose/map.html
Just trying to create a simple map like you see above so that if they clicked on a state or a point in the state, a little pop-up window comes on like you see in many interactive map applications. Can someone help me figure out how to do this with DW's hotspot tool? I'm terrible with code but I do know it would probably start with something like onclick (I think that's what it is). But even if I get that onclick code working, I'm not even sure how to incorporate it into the <map> code that DW makes for the hotspot.
Any help is appreciated. Thanks.
PS - I use DW4 and also have access to 5.5 on another computer.

Here's another way you could do it but wil get very long. Also consider Kens tooltip - probably the easiest if you don't want a 'close button'
<!DOCTYPE HTML PUBLIC">
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Map</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#map {
    width: 550px;
    height: 390px;
    margin: 0 auto;
    position: relative;
#nevada {
position: absolute;
top: 150px;
left: 50px;
background-color:#FFC;
padding: 15px;
display: none;
#nevada {
position: absolute;
top: 100px;
left: 50px;
background-color:#FFC;
padding: 15px;
display: none;
.close {
    position: absolute;
    display: inline-block;
    background-color:#903;
    color: #fff;
    text-decoration: none;
    padding: 6px;
    right: 0;
    top: 0;
h2 {
    margin: 0;
    padding: 0;
p {margin: 0;
padding: 0;
</style>
<script>
$(document).ready(function() {
$('.hide').hide();
$('.newMexico').click(function() {
$('#newMexico').show();
$('.nevada').click(function() {
$('#nevada').show();
$('.close').click(function() {
$('.hide').hide();
</script>
</head>
<body>
<div id="map">

<div class="hide" id="newMexico">
<a href="#" class="close">X</a>
<h2>New Mexico</h2>
<p>Some content about New Mexico</p>
</div>

<div class="hide" id="nevada">
<a href="#" class="close">X</a>
<h2>Nevada</h2>
<p>Some content about Nevada</p>
</div>
<img src="map.png" width="550" height="390" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" coords="157,176,216,183,213,246,173,241,159,244,158,249,147,247,156,177" class="newMexico" href="#">
<area shape="poly" coords="64,91,118,105,105,180,99,176,96,190,52,131,64,92" class="nevada" href="#">
</map>
</div>
</body>
</html>

Similar Messages

How to create a huge interactive map?

Hello everybody
I've started learning Flash two weeks ago and I have the challenge of creating an interactive political map with about 4000 cities. Some cities will have more than 600 lines defining their limits which will make this project very demanding on processing.
People will be able to zoom in/out, select cities and see information about them.
As a starting point, I've begun working with 500 cities. I've imported a vectorial drawing of these cities and converted each one of them to symbols using flash javascript, resulting of course in 500 symbols. I don't know if it was a good way of starting this project but worked for me. Then my problems begun.
First I tried to use the mouse roll over and roll out events to change the (fill) color of cities but the city limits (stroke) changed also.
Second I want to add some properties to the cities such as city code, name, etc. but I wasn't able to do that using class inheritance. Would I have to create a different City class for every symbol I would like to extend? This approach looks like a lot of headache and redundant work.
Finally my question is should I start all over again and change my approach? If yes, how? If no, how can I solve those two problems?
Thanks

can't answer everything but I find this project very ambitious for someone with 2 weeks experience. I give you credit for trying.
as for the color changes, in each city symbol you need to have a separate "fill" symbol so that you can change the color of the fill and not the stroke.
also this link will help you understand the concept and confusion of target, currentTarget, mouse_over vs roll_over:
http://www.wastedpotential.com/?p=10
if each of your mc's is using a City.as class, that should work fine for giving each city the same properties. No need to create 500 different classes. I'm not an OOP expert but I know what you are trying is very possible and should be straight-forward.
Get Colin Moock's Essential ActionScript 3.0 and Shrupe's Learning ActionScript 3.0 for a crash course on implementing something like this.

How can i create a more detailed map in aperture?

How can i create a more detaled map in Aperture- Book?

There are no templates for more detailed maps in Aperture.
You might consider to add more detailed maps as photos to the photo boxes in the book. I sometimes simply take a screenshot of the map in "Places" view to get a more detailed map with the pins marking the places.

How to create an occupancy grid map

I am using a LIDAR sensor (URG-04LX) to map an environment for DaNI 1.0 in LabVIEW Robotics 2010 module. I want to create an occupancy grid map of the environment to use for path planning purposes. Can anyone provide me with any assistance. I have looked at the examples for path planning using the A* technique on an occupancy grid but I don't understand how to create the occupancy map.

... everyone above as told you how to create and LABVIEW occupancy map.... using an occupancy map.
The labview VI assumes you know exactly what the envrioment is like. Meaning you pretty much have some representation of the enviroment.
What you want to know is how do I generate and occupancy map using a laserscanner. For this you would need something called SLAM. Simultaneous localisation and Mapping. In order generate an occupancy map you need to continously localise your system so you can map laser measurements with refference to a fixed refferece frame, you then have to localise with respect to your map and repeat. This is non-trivial !
unfortuently there is no LabviewVi to do this for you, and there is not much working example code. So honestly if you want to do this, i would use a robotic development framework call ROS and using gmapping (which is a SLAM package). Alternatively if you inist on using labview you could create a dll of the gmapping (open source libary) and call it from labview, Our you could try to implement it from scratch yourself....
I just wish it was easier to use opensource libaries like pcl,opencv and integrate with textbased langauges using a labview system... it would make labview so much better, but labview robotics i feels is not really a good robotic application framework comapared to alternatives like ROS which have much bigger communities and much more modules of code you can use... escpecially for SLAM
https://decibel.ni.com/content/docs/DOC-22790 this is the best i have managed to find ( they do implement SLAM for this)
http://www.ros.org/wiki/gmapping

Problem with "Building interactive maps with Flex" example

I have been looking at the tutorial by Matt Sheehan Building interactive maps with Flex found at
http://www.adobe.com/devnet/flex/articles/interactive_maps.edu.html
I have downloaded Flash Builder 4.6 trial version and followed the example. I have also copied the source code from the example and pasted that into the file mymodestmap.mxml.
In both cases the application opens a new page in Google Chrome but does not display any map data.
No errors or warnings are displayed when I run the code from Flash Builder.
Although I have got plenty of experience of writing software, I am a total beginner when it comes to developing web applications!
Any ideas as to what I am doing wrong, I have attached the source below.
Cheers
Steve
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx1="library://ns.adobe.com/flex/halo"
                                 minWidth="1024" minHeight="768" creationComplete="init()" viewSourceURL="srcview/index.html" xmlns:mx="library://ns.adobe.com/flex/mx">
          <fx:Script>
                    <![CDATA[
                              import mx.core.UIComponent;
                              import com.modestmaps.TweenMap;
                              import com.modestmaps.mapproviders.OpenStreetMapProvider;
                              import com.modestmaps.geo.Location;
                              import com.modestmaps.extras.ZoomSlider;
                              import com.modestmaps.extras.HandCursor;
                              [Bindable]private var _map:TweenMap;
                              private var _mapUI:UIComponent;
                              [Bindable]private var _initialLat:Number = 40.668903;
                              [Bindable]private var _initialLong:Number = -111.680145;
                              [Bindable]private var _initialZoom:Number = 6;
                              private var _mouseWheelZoomCenter:Location;
                              private var _mouseWheelZoom:int;
                              private function init():void
                                        _map = new TweenMap(mappanel.width, mappanel.height, true, new OpenStreetMapProvider());
                                        _map.setCenterZoom(new Location(_initialLat, _initialLong), _initialZoom);
                                        mapCore();
                              private function mapCore():void
                                        _map.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelHandler);
                                        _mapUI = new UIComponent();
                                        _mapUI.addChild(_map);
                                        var zoomslider:ZoomSlider = new ZoomSlider(_map);
                                        zoomslider.x = mappanel.width - zoomslider.width*2;
                                        zoomslider.y = 30;
                                        _mapUI.addChild(zoomslider);
                                        var handcursor:HandCursor = new HandCursor(_map);
                                        _mapUI.addChild(handcursor);
                                        mappanel.addElement(_mapUI);
                              private function mouseWheelHandler(e:MouseEvent):void {
                                        if (e.delta < 0) {
                                                  _map.zoomOut();
                                        else if (e.delta > 0) {
                                                  _map.zoomIn();
                                        _mouseWheelZoomCenter = _map.getCenter();
                                        _mouseWheelZoom = _map.getZoom();
                    ]]>
          </fx:Script>
          <s:BorderContainer id="mappanel" width="100%" height="97%"/>
</s:Application>

Technically, it's Javascript, not Java :) TOTALLY different beasts. I wish they'd never named it Javascript, it's ambiguous. So anyway, on to the point of the whole thing...
If you want quotes in your values, you'll need to write a function to replace " with \", and pass the values through it. So instead of javascript:passBack('#ENAME#','#JOB#','#SAL#'); you would have javascript:passBack(addslashes('#ENAME#'),addslashes('#JOB#'),addslashes('#SAL#'));. That would mean that ABC"DEF"GH would be passed to the function as ABC\"DEF\"GH and your quotes would stay intact. Search around on the internet for more specifics as to how to pass double quotes in javascript by using backslashes.
~Jer

How to create new view without interlinking with gantt chart or resource views

ok clear
one another question
In msp how to create new view without interlinking with gantt chart or resource views

Hi Shiv PMC--
I splitted your question above in another thread in order not to have a huge thread with many topics in it.
That being said, I'm not sure to understand. A view is just a manner to display MS Project data with columns. A view can have a table with column (left part) associated with a Gantt chart. It can also just contain a table with no Gantt chart (like the task
table) or a table with a timephased grid (resource and task usage).
Please give us more information, maybe with a concrete example so we can help you.
Hope this helps,
Guillaume Rouyre, MBA, MVP, P-Seller |

How to create a custom function module with the records in SAP R/3?

Hi All,
How to create a custom function module with the records in SAP R/3? Using RFC Adapter I have to fetch the custom function module records.
Regards
Sara

Hi
goto se37...here u need to create a function group... then u need to create a function module. inside assign import/export parameters. assign tables/exceptions. activate the same. now write ur code within the function module
http://help.sap.com/saphelp_nw04/helpdata/en/9f/db98fc35c111d1829f0000e829fbfe/content.htm
Look at the below SAP HELP links, These links will show you the way to create a Function Module
http://help.sap.com/saphelp_nw04/helpdata/en/26/64f623fa8911d386e70000e82011b8/content.htm
http://help.sap.com/saphelp_nw04/helpdata/en/9f/db98fc35c111d1829f0000e829fbfe/content.htm

How to Create one more SOA-INFRA under the same domain in weblogic server

Hi All,
Can anybody can guide how to create one more soa-infra under the same domain. In order to maintain my composites to be deployed into
different domains, I need to create one more soa-infra and deployed all the composites under that one.
Please let me know if any demo is available for this activity to be gets completed.
Regards,
CH

Hi Vijay,
There are several composites which needs to be deployed and maintained in the server. So, we I'm trying to maintian
by deploying composites into 3 different SOA-INFRA's so if one is not accessible, we can look into it and others can access the
composites from another SOA-INFRA instead of creating domains.
Let me know what will be feasible way to perform this activity.
Regards,
CH

How to create one more server node for SAP J2EE server?

Hi,
Can any one please suggest how to create one more server node for SAP J2EE server? I am using WAS700.
Thanks and Regards,
Smriti.

Hai,
Login into the Configtool(C:\usr\sap\SID\DVEBMGS<inst no>\j2ee\configtool) if ABAP+JAVA stack or C:\usr\sap\SID\JC<inst no>\j2ee\configtool) if JAVA stack
click on the instance and and select the addserver button on the top to create a servernode for J2EE server.
Thanks and Regards,

How to create table in interactive form via Java Web Dynpro

Hi,
How to create table in interactive form via Java Web Dynpro ?
Any online tutorial / example ?
Thank you.
Regards,
Eric

Hi Eric,
Just choose the UI element Table from Form Library and drag and drop it on the form. now choose the no. of rows and columns and other settings you want about table from the wizard initiated through this process. This all is what you have to do to create the table. Now to bind it to the fields of the data source bind the individual colums to individual attributes of the node in the datasource.
Hope it will solve your query.
Regards,
Vaibhav Tiwari.

How to create Using Formatted Text Field with multiple Sliders?

Hi i found the Java Sun tutorial at http://java.sun.com/docs/books/tutorial/uiswing/components/slider.html very useful, and it tells how to create one Formatted Text Field with a Slider - however i need to create Formatted Text Field for multiple Sliders in one GUI, how do i do this?
my code now is as follows, and the way it is now is scroll first slider is okay but scrolling second slider also changes value of text field of first slider! homework due tomorrow, please kindly help!
// constructor
label1 = new JLabel( "Individuals" );
scroller1 = new JSlider( SwingConstants.HORIZONTAL,     0, 100, 10 );
scroller1.setMajorTickSpacing( 10 );
scroller1.setMinorTickSpacing( 1 );
scroller1.setPaintTicks( true );
scroller1.setPaintLabels( true );
scroller1.addChangeListener(this);
java.text.NumberFormat numberFormat = java.text.NumberFormat.getIntegerInstance();
NumberFormatter formatter = new NumberFormatter(numberFormat);
        formatter.setMinimum(new Integer(0));
        formatter.setMaximum(new Integer(100));
textField1 = new JFormattedTextField(formatter);
textField1.setValue(new Integer(10)); //FPS_INIT
textField1.setColumns(1); //get some space
textField1.addPropertyChangeListener(this);
//React when the user presses Enter.
textField1.getInputMap().put(KeyStroke.getKeyStroke(KeyEvent.VK_ENTER, 0), "check");
        textField1.getActionMap().put("check", new AbstractAction() {
            public void actionPerformed(ActionEvent e) {
                if (!textField1.isEditValid()) { //The text is invalid.
                    Toolkit.getDefaultToolkit().beep();
                    textField1.selectAll();
                } else try {                    //The text is valid,
                    textField1.commitEdit();     //so use it.
                } catch (java.text.ParseException exc) { }
label2 = new JLabel( "Precision" );
scroller2 = new JSlider( SwingConstants.HORIZONTAL, 0, 100, 8 );
scroller2.setMajorTickSpacing( 10 );
scroller2.setMinorTickSpacing( 1 );
scroller2.setPaintTicks( true );
scroller2.setPaintLabels( true );
scroller2.addChangeListener(this);
textField2 = new JFormattedTextField(formatter);
textField2.setValue(new Integer(10)); //FPS_INIT
textField2.setColumns(1); //get some space
textField2.addPropertyChangeListener(this);
//React when the user presses Enter.
textField2.getInputMap().put(KeyStroke.getKeyStroke(KeyEvent.VK_ENTER, 0), "check");
        textField2.getActionMap().put("check", new AbstractAction() {
            public void actionPerformed(ActionEvent e) {
                if (!textField2.isEditValid()) { //The text is invalid.
                    Toolkit.getDefaultToolkit().beep();
                    textField2.selectAll();
                } else try {                    //The text is valid,
                    textField2.commitEdit();     //so use it.
                } catch (java.text.ParseException exc) { }
// State Changed
     public void stateChanged(ChangeEvent e) {
         JSlider source = (JSlider)e.getSource();
         int fps = (int)source.getValue();
         if (!source.getValueIsAdjusting()) { //done adjusting
              if(source==scroller1)   {
                   System.out.println("source ==scoller1\n");
                   textField1.setValue(new Integer(fps)); //update ftf value
              else if(source==scroller2)     {
                   System.out.println("source ==scoller2\n");
                   textField2.setValue(new Integer(fps)); //update ftf value
         } else { //value is adjusting; just set the text
             if(source==scroller1)     textField1.setText(String.valueOf(fps));
             else if(source==scroller2)     textField2.setText(String.valueOf(fps));
// Property Change
    public void propertyChange(PropertyChangeEvent e) {
        if ("value".equals(e.getPropertyName())) {
            Number value = (Number)e.getNewValue();
            if (scroller1 != null && value != null) {
                scroller1.setValue(value.intValue());
             else if (scroller2 != null && value != null) {
                scroller2.setValue(value.intValue());
    // ACTION PERFORMED
    public void actionPerformed(ActionEvent event) {
    if (!textField1.isEditValid()) { //The text is invalid.
        Toolkit.getDefaultToolkit().beep();
        textField1.selectAll();
    } else try {                    //The text is valid,
        textField1.commitEdit();     //so use it.
    } catch (java.text.ParseException exc) { }
         if (!textField2.isEditValid()) { //The text is invalid.
        Toolkit.getDefaultToolkit().beep();
        textField2.selectAll();
    } else try {                    //The text is valid,
        textField2.commitEdit();     //so use it.
    } catch (java.text.ParseException exc) { }
...

if :p3_note_id is null
then
insert into notes (project_id, note, notes_month, notes_year) So, p3_note_id is NULL.
Another option is that you have a trigger on table NOTES that generates a new note_id even for an update.

How to Create an Input Schedule Comparison with Data Using EVDRE

Hello,
I try implement the scenario described in "How to Create an Input Schedule Comparison with Data Using EVDRE".
Once I am using the "Insert Function" from the panel and selecting the EVTIM function Excel crashes (see page 8 How to paper).
Systems:
BPC 7.0 NW SP02
Office 2007
BPCADminClient and BPCOfficeClient up to date
Have anyone a solution?
Thanks
Oktay

Hi Oktay -
This function works in my BPC70NW SP02 system. Your issue might be that you are trying to access a TIME member that does not exist. Please make sure the offset value is a valid dimension member.
I can confirm that EVTIM does allow the offset for base members (such as 2009.MAY) as well as parent nodes (such as 2009.Q1 or 2008.TOTAL)... BUT...the offset result of the EVTIM function needs to be a valid dimension member!
Regards,
Sheldon

How to create user editable Crystal Report with dynamic dataset

What I would like to achieve:
A program loads a report in runtime updates list of database fields (possibly includes sample data), open report in "Crystal Reports 2011" (or 2008) where user customizes report and saves it. Later on the program loads the report, fills actualized data and displays it in .net report viewer.
What I do:
CrReport = New CrystalDecisions.CrystalReports.Engine.ReportDocument
CrReport.Load(TemplateFilename)
Dim Results As DataTable
DataTable is filled from a database
CrReport.SetDataSource(mResults)
CrReport.SaveAs(NewReportPath, True)
The NewReportPath is opened in the default program.
What are the problems
The report is open in preview mode (not in design).
When the field is added to the report the designer asks for XML datasource on preview.

The short answer is that it is not possible. I broke the question to other two: How to save a report that it opens without preview? and How to create user editable Crystal Report with dynamic dataset, where it is possible to find details. Key answer is Re: How to create an editable previewable report?

How to creat the Varient for 1099MISC With Holding Tax

How to create the Variant for 1099MISC With Holding Tax ?

HI,
please follow the below steps to create variant at report.
tcode se38
report RFIDYYWT
pass all the parameters
press save icon
give variant name
retrive the variant in report
tcode se38
report name RFIDYYWT
press : shift + F5
or get varinat icon.
I hope above will resolve your issue.
Regards
Madhu M

How to create labeled table of Content with expand and collapse

Hi All,
Can somebody help me how to create labeled table of Content with expand and collapse as example given below:
User1
Template1
Template2
User2
+
User3
Template1
Template2
Like when we see expand (+) and collapse (-) button when we click on 'about this page' link.
Thanks
Bhupendra

Hi,
Tou can use Table inside table to show the details this way but I'm not sure about Expand/Collapse.
Expand/Collapse are part of HGRID.
I think we can develop this functionality with little manipulation.
Regards,
Reetesh Sharma
Edited by: Reetesh Sharma on Jun 28, 2010 4:56 AM

How to create a more interactive map with DW hotspot tool

Similar Messages

Maybe you are looking for