Jump to content

Carafe Map Advance option or configuration


Recommended Posts

Hi everybody,


I'm new to carafe but I manage tomake it working with geocoding and webviewer mapping. This tool is so great.

Do you know where to find help for advance features like :

default zoom level ?
markers different images ?

I've looked into the scripts but the html code is soo big that I can not find the specific portion ..

thank you



Link to comment
Share on other sites

Hi Antoine, 

You can set the zoom level when initializing the map object by adding a zoom property like this:

map = new google.maps.Map(document.getElementById("map"), {
    zoom: 8,

You can set the marker icon when initializing the marker object by adding an icon property like this:

const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),

new google.maps.Marker({
    position: map.getCenter(),
    icon: svgMarker,
    map: map,

You can also use the setter function to set the property after the object has been initialized. For example:


Same for the zoom setting:



Link to comment
Share on other sites

Thank you for the reply.

I managed to do that in the js code if I use a code html & js into the web viewer and not carafe. 
but I don t know where to use this code into carafe map add on ?

Link to comment
Share on other sites

Sorry for my stupid question but where is it ? In my extension folder/carafe i have a template.xml

And it's not there where the modifies can change for everybody.

thank you

Link to comment
Share on other sites

You'll need to edit the original bundle files, in particular the template.carafe file, and then deploy the updated bundle to your solution.

Take a look at the tutorials at https://carafe.fm/tutorials/. I haven't watched them all myself, but my guess is that the following videos might be helpful: Anatomy of, Configure, Deploy, Advanced Dev parts 1 & 2.

Something to keep in mind: There are two versions of Carafe. There's the original, which is now called Carafe Kitchen. The newer one uses the newer FileMaker add-on capabilities. I think the videos were recorded with Carafe Kitchen.

Link to comment
Share on other sites

You can export the bundle you're using so that you can modify it. To do this, find your bundle in the Carafe Configurator layout, go to the bundle details, and click the button to export the bundle. This will create a single json file which will include all the source code.

You can then use the Carafe Bundler utility to convert that json file into multiple individual source files (including template.carafe). Look for the "To work on an existing Bundle..." text to find the instructions for doing that.

As you make changes, you can preview them in your browser. Run npm run watch to enable that. This will also hot-reload the bundle in the browser as you make changes. This way you can see those changes take effect immediately.

To compile the source files back into a single json bundle and send it to FileMaker, update the 'sendFmpUrl' property in the package.json file, and then run npm run force-send.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...

Important Information

By using this site, you agree to our Terms of Use.